Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

278
Visualizações
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 Respostas
Responde à pergunta

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 Relatório

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda