JavaScript:
Análisis de HTML

Cómo hacerlo:

Vamos a analizar HTML usando la API DOMParser en JavaScript.

const parser = new DOMParser();
const htmlString = `<p>Hola, mundo!</p>`;
const doc = parser.parseFromString(htmlString, 'text/html');
console.log(doc.body.textContent); // Salida: Hola, mundo!

Ahora, vamos a capturar algo más específico, como un elemento con una clase:

const htmlString = `<div><p class="saludo">¡Hola, de nuevo!</p></div>`;
const doc = parser.parseFromString(htmlString, 'text/html');
const saludo = doc.querySelector('.saludo').textContent;
console.log(saludo); // Salida: ¡Hola, de nuevo!

Estudio Profundo

Analizar HTML es tan antiguo como la web. Inicialmente, era cosa de los navegadores: los navegadores analizaban HTML para mostrar páginas web. Con el tiempo, los programadores querían aprovechar este proceso, lo que llevó a APIs como DOMParser.

¿Alternativas? Claro. Tenemos bibliotecas como jQuery y herramientas como BeautifulSoup para Python. Pero el DOMParser nativo de JavaScript es rápido y está integrado, no necesita bibliotecas adicionales.

En términos de implementación, cuando analizas HTML con DOMParser, crea un objeto Document. Piénsalo como un modelo jerárquico de tu HTML. Una vez que lo tienes, puedes navegar y manipularlo tal como lo harías con el DOM de una página web normal.

Aquí está la cosa: el análisis puede tropezar con HTML mal formado. Los navegadores son tolerantes, pero DOMParser podría no serlo. Por lo tanto, para tareas complejas o HTML desordenado, las bibliotecas de terceros podrían hacer un mejor trabajo de limpieza.

Ver También

• Documentos web de MDN sobre la API DOMParser: MDN DOMParser
• Capacidades de análisis de jQuery: jQuery.parseHTML()
• Cheerio, una implementación rápida, flexible y ligera del núcleo de jQuery para el servidor: Cheerio.js
• Para análisis no-JS: la biblioteca BeautifulSoup de Python: Beautiful Soup