Cómo convertir URL (sitios web, correo electrónico) de una cadena de texto a etiquetas html <a> con javascript

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!