0
279
ViewsCómo agregar hashtag y mención en textInput react-native
Me enfrento a este desafío cuando el cliente quiere que agregue una mención y un hashtag a la entrada de texto, se verá así
Probé algunas lib, pero no me dan un resultado como este, así que traté de hacer una personalizada, pero me pregunto cómo podemos detectar cuando escribimos "@" o "#", luché durante días debido a esto, por favor ayuda
·
Juan Pablo Isaza
2 answers
Answer question0
Regex es perfecto para esto:
inputStr.replace(/(?<=#).*?(?=( |$))/g, hashtag => { // do something with hashtag, eg "fenty" return hashtag; });Desglosando la expresión regular:
(?<=#) # match anything preceded by "#" .*? # match everything without greedy matching ( ?= # match anything with the following after it: ( |$) # space or end of text ) g (global) significa hacer coincidir todas las ocurrencias.
Se puede hacer lo mismo para @ :
inputStr.replace(/(?<=@).*?(?=( |$))/g, mention => { // mention == "fenty" return mention; });También puede realizar manipulaciones en, digamos, los hashtags para convertirlos en enlaces o lo que sea:
const newString = inputStr.replace(/(?<=#).*?(?= )/g, hashtag => { // do something with hashtag, eg "fenty" return `<a href="/hashtags/${hashtag}">${hashtag}</a>`; // "stunna new year highlighter <a href="/hashtags/fenty">fenty</a> @fenty" });Manifestación:
"hello #yes no #maybe so #ionter6 #000".replace(/(?<=#).*?(?=( |$))/g, hashtag => { console.log("Hashtag from post:", hashtag); return hashtag; });
·
Juan Pablo Isaza
Report
0
Creo que deberías probar esta biblioteca, hice lo mismo usando las menciones controladas de forma nativa.
·
Juan Pablo Isaza
Report
Answer question