¿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:
- Obtiene todos los enlaces: Utiliza
document.querySelectorAll('a[href]')para seleccionar todos los elementos<a>que tienen un atributohref(es decir, todos los enlaces). - 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) ytext(el texto visible del enlace). - Filtra enlaces externos: Elimina los enlaces que apuntan al mismo dominio utilizando
URLy comparando los hostnames. - Elimina duplicados: Emplea
Setpara eliminar enlaces duplicados y luego los ordena alfabéticamente. - Crea una lista formateada: Genera una lista formateada Markdown con cada enlace y su texto, ideal para copiar y pegar en otras aplicaciones.
- 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 comomapyfilter.map()crea un nuevo array donde cada elemento es un objeto con las propiedadeshrefytext.filter()elimina los enlaces que no son externos.Set()elimina duplicados ysort()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.
