¿Qué hace este script?

Este script de JavaScript está diseñado para identificar y organizar todos los enlaces externos presentes en una página web. En otras palabras, busca todos los enlaces que apuntan a dominios diferentes al actual y los presenta de manera clara y concisa en la consola del navegador.

Pasos clave que realiza el script:

  1. Obtiene todos los enlaces: Utiliza document.querySelectorAll('a[href]') para seleccionar todos los elementos <a> que tienen un atributo href (es decir, todos los enlaces).
  2. Crea un array de objetos: Convierte la NodeList obtenida en un array de objetos, donde cada objeto representa un enlace y contiene las propiedades href (la URL completa) y text (el texto visible del enlace).
  3. Filtra enlaces externos: Elimina los enlaces que apuntan al mismo dominio utilizando URL y comparando los hostnames.
  4. Elimina duplicados: Emplea Set para eliminar enlaces duplicados y luego los ordena alfabéticamente.
  5. Crea una lista formateada: Genera una lista formateada Markdown con cada enlace y su texto, ideal para copiar y pegar en otras aplicaciones.
  6. Muestra la lista en la consola: Imprime la lista final en la consola del navegador para una fácil revisión.

¿Para qué sirve?

Este script puede ser útil en diversas situaciones:

  • Análisis de enlaces: Identificar rápidamente a qué sitios externos enlaza una página.
  • Investigación: Extraer una lista de recursos externos para un análisis más profundo.
  • Desarrollo web: Crear un inventario de enlaces externos para realizar cambios o migraciones.
  • SEO: Analizar la distribución de enlaces salientes de una página.
  • Scraping: Como punto de partida para extraer datos de otras páginas web.

Ejemplo de uso

Imagina que quieres analizar los enlaces externos de un artículo de blog. Simplemente abre la consola del navegador, pega el script y ejecútalo. Obtendrás una lista clara y concisa de todos los enlaces externos presentes en la página, junto con su texto.

Código completo y explicado

JavaScript

// Obtener todos los enlaces en la página principal
const links = Array.from(document.querySelectorAll('a[href]'))
  .map(link => {
    return {
      href: link.href,
      text: link.innerText.trim()
    };
  })
  .filter(link => {
    try {
      const url = new URL(link.href);
      return url.hostname !== window.location.hostname;
    } catch (error) {
      console.error('Error al analizar el enlace:', link.href, error);
      return false;
    }
  });

// Filtrar enlaces únicos y ordenar alfabéticamente
const uniqueLinks = Array.from(new Set(links.map(link => link.href))).sort();

// Crear una lista de enlaces con títulos
const linkListWithTitle = uniqueLinks.reduce((list, href) => {
  const link = links.find(link => link.href === href);
  return list + `- [${link.text}](${link.href})\\n`;
}, 'Enlaces encontrados fuera del sitio:\n');

// Mostrar en consola
console.log(linkListWithTitle);

Explicación por partes:

  • Array.from() convierte la NodeList en un array para poder utilizar métodos como map y filter.
  • map() crea un nuevo array donde cada elemento es un objeto con las propiedades href y text.
  • filter() elimina los enlaces que no son externos.
  • Set() elimina duplicados y sort() ordena alfabéticamente.
  • reduce() crea la lista formateada Markdown.

Personalizaciones

podés personalizar este script para:

  • Filtrar por tipo de enlace: Agregar condiciones adicionales en el filter() para buscar enlaces específicos (por ejemplo, imágenes, PDFs).
  • Guardar los resultados: En lugar de mostrar en la consola, podés guardar los resultados en un archivo o enviarlos a una API.
  • Analizar múltiples páginas: Crear una función que tome una URL como entrada y repita el proceso para esa página.

¡Y eso es todo! Con este script,vas a tener una herramienta poderosa para analizar y organizar los enlaces externos de cualquier página web.