Hola chicos, estoy tratando de detectar si una cadena contiene una URL y, en caso afirmativo, envuélvala con etiquetas de anclaje y haga que se pueda hacer clic. pero lo que tengo muestra tanto la cadena como las etiquetas de anclaje.
Mi código
function urlify(text) { var urlRegex = /(https?:\/\/[^\s]+)/g; return text.replace(urlRegex, function(url) { var hyperlink = url; if(!hyperlink.match('^https?:\/\/')){ hyperlink = 'http://' + hyperlink; } return '<a className="blue" href="' + url + '" rel="noopener" noreferrer>' + url + '</a>' }) // or alternatively }Dentro de mi código html
<p>{urlify(text)}</p>producción
first remove anchors before return text.replace – Muneeb Mirza <a className="blue" href="https://onlyfans.com/my/notifications">https://onlyfans.com/my/notifications</a>En lugar de mostrar el enlace con las etiquetas de anclaje, quiero mostrarlo como un enlace en el que se puede hacer clic sin las etiquetas.
Suponiendo que la función urlify funcione como espera, el resultado debe considerarse una cadena HTML. Usa dangerouslySetInnerHTML para configurar el texto interno de la etiqueta p .
Ejemplo:
<p dangerouslySetInnerHTML={{ __html: urlify(text) }} />Como sugiere el nombre, esta es una función potencialmente peligrosa, pero si tiene control total sobre el contenido y el cálculo de las etiquetas HTML que se generan, probablemente sea bastante seguro.
Sin embargo, si tiene alguna inquietud sobre el contenido, le sugiero que también use DOMPurify para ayudar a desinfectar el valor del text antes de procesarlo para crear los enlaces.