Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

275
Vistas
How to add hashtag and mention in textInput react-native

I'm facing this challenge when client want me to add mention and hashtag to the textInput, will look like this

enter image description here

I tried some lib , but they are not give me the result like this, so i tried to make a custom one,, but i wonder how can we detect when we type "@" or "#", i struggle for days because of this, please help

about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

Regex is perfect for this:

inputStr.replace(/(?<=#).*?(?=( |$))/g, hashtag => {
    // do something with hashtag, e.g. "fenty"
    return hashtag;
});

Breaking the regex down:

(?<=#)       # match anything preceded by "#"
.*?          # match everything without greedy matching
(
  ?=         # match anything with the following after it:
  ( |$)      # space or end of text
)

g (global) means to match all occurrences.

The same thing can be done for @:

inputStr.replace(/(?<=@).*?(?=( |$))/g, mention => {
    // mention == "fenty"
    return mention;
});

You can also perform manipulations on, say, the hashtags to turn them into links or whatever:

const newString = inputStr.replace(/(?<=#).*?(?= )/g, hashtag => {
    // do something with hashtag, e.g. "fenty"
    return `<a href="/hashtags/${hashtag}">${hashtag}</a>`; // "stunna new year highlighter  <a href="/hashtags/fenty">fenty</a> @fenty"
});

Demo:

"hello #yes no #maybe so #ionter6 #000".replace(/(?<=#).*?(?=( |$))/g, hashtag => {
    console.log("Hashtag from post:", hashtag);
    return hashtag;
});

about 4 years ago · Juan Pablo Isaza Denunciar

0

I think you should give this library a try, I did the same using react-native-controlled-mentions

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda