Implementación rápida
Si desea convertir la URL de texto en enlaces en los que se puede hacer clic rápidamente (dentro del dom o una cadena), debe saber que este no es un trabajo fácil de hacer por su cuenta. Los URI son complejos y hay millones de casos en los que su función autoimplementada podría fallar. Por ejemplo :
function linkify(inputText) {
var replacedText, replacePattern1, replacePattern2, replacePattern3;
// URL que comienzan con http: //, https: // o ftp: //
replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
replacedText = inputText.replace(replacePattern1, '<a href="$1" target="_blank">$1</a>');
// URL que comienzan con "www." (sin // antes, o volvería a vincular los anteriores).
replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
replacedText = replacedText.replace(replacePattern2, '$1<a href="http://$2" target="_blank">$2</a>');
// Cambie las direcciones de correo electrónico a mailto :: links.
replacePattern3 = /(([a-zA-Z0-9\-\_\.])[email protected][a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim;
replacedText = replacedText.replace(replacePattern3, '<a href="mailto:$1">$1</a>');
return replacedText;
}
La función anterior funcionaría, pero hay una mejor manera de lograr esta tarea .
Utilice una biblioteca ( Linkify.js )
Bueno, el primer punto es limpio y funcional, pero en algunos casos puede fallar. En lugar de darle quebraderos de cabeza aprender a procesar una cadena y buscar URL, le recomendamos que utilice una biblioteca que se encargará de todo este trabajo por usted.
Estamos hablando de Linkify.js . Linkify es un complemento de JavaScript para buscar enlaces en texto plano y convertirlos en <a>
etiquetas HTML . Funciona con todas las URL web y direcciones de correo electrónico válidas. Para incluir linkify en su proyecto, visite la página de inicio y descargue una distribución (o use npm o bower) e incluya los scripts en su documento:
<!-- Linkify Core -->
<script src="linkify.min.js"></script>
<!-- Si desea utilizar el módulo jquery, incluya este script -->
<script src="linkify-jquery.min.js"></script>
Linkify ofrece más de 1 forma de inicialización, con jQuery puede convertir directamente contenido DOM en enlaces, por ejemplo:
<div id="linkDemo">
Visit ourcodeworld.com , it has a lot of interesting content. You can contact us writing to [email protected]
</div>
<script>
$("#linkDemo").linkify({
target:"_blank"
});
</script>
Debería dar salida:
Visite ourcodeworld.com , tiene mucho contenido interesante. Puede contactarnos escribiendo a [email protected]
O use solo el núcleo de linkify sin jQuery ( lea más sobre los modos aquí ):
<div id="linkDemo"></div>
<script>
var str = '<p>For help with GitHub.com, please email [email protected]</p>';
var processedContent = linkifyStr(str, options);
// o
// var processedContent = str.linkify();
document.getElementById("linkDemo").innerHTML = processedContent;
</script>
Puedes probar tu propio texto en la página de inicio oficial aquí , ¡diviértete!
Conviertete en un programador más sociable