Visitar un portal web de noticias o blogs técnicos hoy en día suele ir acompañado de una gran cantidad de ruido visual: barras de navegación, anuncios emergentes, widgets de redes sociales, pies de página con enlaces infinitos y secciones de comentarios. Cuando los desarrolladores necesitamos implementar una herramienta automatizada (como importar un artículo web para convertirlo a Markdown en local o resumirlo usando Inteligencia Artificial), extraer únicamente el artículo principal sin capturar el código basura es un reto mayor.

Para resolver este problema, la fundación **Mozilla** desarrolló **Readability.js**, la librería de extracción semántica que le da vida al popular **Modo de Lectura (Reader View)** de Firefox. Este motor de análisis heurístico corre 100% en local sobre el navegador del cliente y limpia páginas web basándose exclusivamente en el comportamiento del árbol DOM.

El objetivo de Readability: Analizar un documento HTML, ignorar los bloques que no pertenecen a la lectura central y retornar un objeto JSON limpio que contenga el título del artículo, el contenido principal en HTML semántico simplificado, el autor y un resumen de longitud de lectura.

Las Reglas Heurísticas del Algoritmo

Readability no lee el diseño visual renderizado en pantalla (CSS layout); en su lugar, examina detalladamente la estructura del árbol DOM y aplica una serie de puntuaciones matemáticas a cada nodo:

  1. Filtrado Inicial por Clases e IDs: El algoritmo analiza las clases y nombres de ID de cada nodo. Suma o resta puntos usando expresiones regulares predefinidas. Si una clase contiene strings como comment, sidebar, ad, header, footer, sponsor, el nodo recibe una penalización alta. Si contiene strings como entry, content, main, body, article, se le suman puntos.
  2. Densidad de Enlaces (Link Density): Es una de las heurísticas más potentes. Se calcula dividiendo la cantidad de caracteres contenidos dentro de etiquetas de enlace (<a>) por la cantidad total de caracteres del nodo. Si el ratio supera un umbral crítico (típico en menús de navegación o widgets de post relacionados), el elemento es descartado.
  3. Puntuación por Contenido de Texto: El algoritmo evalúa etiquetas de párrafo (<p>) y celdas de texto. Los párrafos que tengan más de 25 caracteres y signos de puntuación como comas o puntos suman puntos a sus nodos padres, acumulándose hacia arriba en el árbol jerárquico.
  4. Cálculo del Candidato Principal: El elemento con la puntuación acumulada más alta es seleccionado como el contenedor raíz del artículo. Los elementos secundarios que estén fuera de él pero que tengan puntuaciones razonables (como subtítulos o imágenes representativas) son absorbidos.

Ejemplo de Integración Client-Side

Readability se puede importar de forma directa a través de un módulo para limpiar el contenido de un HTML de entrada antes de compilarlo a Markdown con herramientas locales:

// Importar Readability en navegador desde una red de distribución (CDN)
import { Readability } from 'https://esm.sh/@mozilla/readability';

async function importarArticuloLimpio(url) {
  // 1. Fetch de la página web externa (usando un Proxy CORS si es necesario)
  const response = await fetch(url);
  const rawHtml = await response.text();
  
  // 2. Parsear el HTML crudo a un documento DOM inerte en memoria
  const parser = new DOMParser();
  const docInerte = parser.parseFromString(rawHtml, "text/html");
  
  // 3. Ejecutar el motor de Mozilla Readability
  const reader = new Readability(docInerte);
  const article = reader.parse();
  
  if (article) {
    console.log("Título:", article.title);
    console.log("Autor:", article.byline);
    
    // Contenido HTML completamente libre de anuncios y sidebars
    const cleanHTML = article.content;
    document.getElementById("editor-markdown").value = cleanHTML;
  }
}

Importancia en Herramientas de Productividad

Para editores web como **Markdify**, la integración de esta tecnología es de gran valor. Permite que el flujo de trabajo de los desarrolladores que toman notas o redactan reportes a partir de fuentes documentales de internet se automatice. En lugar de copiar y pegar manualmente secciones dispersas, un solo script en el cliente puede purificar el artículo fuente, traduciéndolo a un Markdown estructurado listo para exportar a PDF.

Referencias Científicas y Documentación Oficial