Convertir direcciones URL en formato de texto en enlaces con JavaScript
Actualizado: 28 de noviembre del 2022
Por: Norfi Carrodeguas
Por: Norfi Carrodeguas
Script para detectar direcciones URL de internet en el texto plano de una página y escribir los links o hipervínculos que le corresponden automáticamente, sin librerías ni dependencias externas.
En ocasiones creamos artículos con varios enlaces internos o a otros sitios de internet y se hace algo molesto tener que crear en HTML los anclajes o hipervínculos necesarios.
Podemos dejarle esa tarea a JavaScript, usando unas líneas de código para detectar las direcciones URL en el texto y crear de forma dinámica los enlaces necesarios.
En este artículo comparto como hacerlo de forma sencilla.
Detectar direcciones URL en formato de texto plano y convertirlas en enlaces
Hay varias librerías disponibles en internet que realizan esta tarea, pero todas son algo fastidiosas de usar.
Todas requieren enlazarlas y casi siempre también cargar JQuery, lo que afecta el rendimiento y velocidad.
El siguiente script que comparto funciona solo con puro JavaScript y se puede impregnar en el HTML de cualquier página.
Cualquier dirección de internet que encuentre en formato de texto plano, será convertida en un enlace o hipervínculo clicleable.
Por ejemplo las siguientes direcciones serán convertidas: https://twitter.com, http://twitter.com o ftp://sitio.com
No sucede así con twitter.com o con www.twitter.com, es necesario que las direcciones estén antecedidas del protocolo correcto y que no existan espacios.
El script agrega los atributos target="_blank" a los enlaces, para que se abran en una nueva pestaña del navegador y rel="nofollow noopener", para evitar la fuga de autoridad y agregar seguridad y rendimiento a la página donde se empleen.
Crear enlaces dinámicamente con JavaScript
Para implementar este método solo se requieren dos acciones.
1- Encierra el área de texto donde se encuentren las direcciones URL a convertir dentro de un contenedor DIV, con el identificador "text2url".
Por ejemplo.
<div id="text2url">
Texto que contiene una o varias direcciones URL como https://norfipc.com, para convertirlas en enlaces.
</div>
Se ha minimizado previamente.
<script>
function replaceURLWithHTMLLinks(e){return e.replace(/(\(.*?)?\b((?:https?|ftp|file):\/\/[-a-z0-9+&@#\/%?=~_()|!:,.;]*[-a-z0-9+&@#\/%=~_()|])/gi,function(e,r,n){var t="";r=r||"";for(var a=/\(/g;a.exec(r);){var l;(l=/(.*)(\.\).*)/.exec(n)||/(.*)(\).*)/.exec(n))&&(n=l[1],t=l[2]+t)}return r+"<a href='"+n+"' target='_blank' rel='nofollow noopener'>"+n+"</a>"+t})}
document.addEventListener("DOMContentLoaded",function(event){
var elm=document.getElementById("text2url");elm.innerHTML=replaceURLWithHTMLLinks(elm.innerHTML);});
</script>
Redirecciones a sitios externos
El script que uso en esta página (no el que comparto el código), para convertir la direcciones de ejemplo, envía los enlaces a este mismo dominio, los que después se redireccionan con PHP a los sitios correspondientes.
De esta forma evito enlazar directamente sitios externos de internet, para evitar la pérdida de autoridad, enlazar sitios con contenido inadecuado y tener que preocuparme en el futuro por enlaces rotos.
Lee más información en el siguiente artículo: Redireccionar enlaces a sitios externos de internet
Páginas relacionadas
✓ Como usar los enlaces, vínculos o anclajes en HTML
✓ HTML fácil, código, elementos básicos y funcionamiento
✓ HTML fácil, código, elementos básicos y funcionamiento
Comparta esta página
Facebook
Twitter