> Faqs > Cómo convertir enlaces en texto en enlaces HTML al mostrarlos en una página

Cómo convertir enlaces en texto en enlaces HTML al mostrarlos en una página

Tengo una página donde hay texto que introducen los usuarios.

Al mostrarse ese texto me gustaría saber cómo podría convertir todo lo que son enlaces en etiquetas A HREF para que se puedan hacer clic y navegar a dichos contenidos.

Tendría que reconocer como enlaces cadenas como:

http://www.example.com
https://www.example.com
example.com
www.example.com
example.com/url_interna
www.example.com/url_interna.html

¿Cómo podría hacer esto fácilmente? Mi idea sería que el servidor enviase el texto tal cual, sin enlaces y que esa conversión a etiquetas <a> se pueda realizar mediante Javascript. Si ven otra solución mejor, por favor comentar.

Respuestas

La verdad es que no es un tema fácil, si lo tienes que hacer a mano, porque los enlaces tienen muchas formas. Tú has puesto varios ejemplos, pero ahora tienes enlaces con todo tipo de terminaciones, como .madrid o ".loquesea", ya que te pueden venir en el futuro todavía más terminaciones. Incluso puede que necesites gestionar enlaces a direcciones de correo o a protocolos distintos como http o https, por ejemplo.

Yo te recomiendo usar alguna librería para poder ahorrar tiempo y dolores de cabeza, ya que integrando esa librería serás capaz de apoyarte en todo un conocimiento y trayectoria de unos desarrolladores que están manteniendo el proyecto y solventando posibles problemas de interpretación sobre lo que es y no es un enlace.

Linkify

En fin, te recomiendo Linkify que creo que es una de las mejores alternativoas. Yo lo he usado y funciona muy bien y es fácil de integrar.

Lo instalas con npm

npm install linkifyjs linkify-html

Luego lo importas:

import * as linkify from 'linkifyjs';
import linkifyHtml from 'linkify-html';

(Por supuesto, también lo puedes cargar desde un CDN si esto te da problemas, o hacer el download de la librería y colocarl en tu proyecto. Luego te pongo un ejemplo)

Y lo puedes usar tan fácilmente como invocar una función.

linkifyHtml('Este es mi texto que puede tener enlaces a http://www.example.com o a example.madrid o example.com.es');

Ejemplo de uso de Linkify

Para que puedas experimentar de manera más cómoda, te voy a dejar un código de una página completa que hace la conversión de URL a enlaces <a href=""> en el texto de un elemento de la página.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Convertir enlaces en el texto a enlaces HTML</title>
</head>
<body>

  <div id="conenlaces">
    <p>
      Este es mi texto que puede tener enlaces a http://www.example.com o a example.madrid o example.com.es.
    </p>
    <p>
      También puedo tener enlaces a direcciones@example.com o incluso a usuarios como @deswebcom. 
    </p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/linkifyjs@3.0.3/dist/linkify.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/linkify-html@3.0.3/dist/linkify-html.min.js"></script>

  <script>
    const elem = document.getElementById('conenlaces');
    const text = elem.innerHTML;
    const options = {
      attributes: {
        rel: 'nofollow noopener noreferrer',
        target: '_blank'
      }
    };
    const linkedText = linkifyHtml(text, options);
    elem.innerHTML = linkedText;
  </script>
</body>
</html>

Al ejecutar esta página verás cómo los enlaces que tenemos en la división id="conenlaces" se convertirán en enlaces HTML que se pueden pinchar y navegar por otras páginas.

Además hemos puesto unas opciones de configuración chulas para linkifyHtml() que permiten mejorar la manera como esos enlaces se presentan en el código HTML. Sobre todo útiles de cara a que se abran en una página aparte y el SEO afecte menos por el hecho de marcarlos nofollow y otros detalles del "rel".

María
76 1 4 7
Estupendo, veo que habrá que morir en el uso de alguna librería de terceros. Gracias!