norfipc.com
Códigos   Mapa del sitio   Informatica
NorfiPC » Codigos » Links externos

Convertir direcciones URL en formato de texto en enlaces con JavaScript



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.
Convertir direcciones URL en formato de texto en enlaces con JavaScript
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.
Lee más información: Como usar los enlaces, vínculos o anclajes en HTML



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 contendor 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>
2- Agrega el siguiente script en el HTML de una página, preferentemente antes de la etiqueta de cierre </body> o cárgalo desde un archivo JS externo, en todas las paginas a usar.
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>
El script se inicia usando el evento DOMContentLoaded, solo después que concluya la carga del DOM, por lo que no afecta en lo absoluto con el rendimiento de la página.



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



Indica que te gusta y comparte

Sígueme en las redes sociales


 
Inicio | Mapa del sitio | Buscar | Sobre mí