HTML-Parsing in JavaScript (Node.js)

HTML-Parsing in JavaScript (Node.js): vollständige Anleitung

HTML-Parsing ist eine der Schlüsselkompetenzen moderner Webentwickler. Im Node.js-Ökosystem gibt es mehrere leistungsstarke Werkzeuge zum Extrahieren von Daten aus HTML-Dokumenten. In diesem Artikel werden wir die drei wichtigsten Bibliotheken im Detail behandeln: Cheerio, JSDOM und Puppeteer, und lernen, das passende Werkzeug für die jeweilige Aufgabe auszuwählen.

1. Cheerio – leichter und schneller Parser

Cheerio ist eine schnelle, flexible und leichte Bibliothek, die eine Teilmenge von jQuery für die Serverseite implementiert. Sie ist ideal zum Parsen von statischem HTML, wenn keine JavaScript-Ausführung auf der Seite erforderlich ist.

Installation

npm install cheerio

Anwendungsbeispiel

const cheerio = require('cheerio');const axios = require('axios');

async function parseHTML() {    const response = await axios.get('https://example.com');    const $ = cheerio.load(response.data);        // Seitentitel extrahieren    const title = $('title').text();    console.log('Titel:', title);        // Alle Links abrufen    const links = [];    $('a').each((i, el) => {        links.push($(el).attr('href'));    });    console.log('Links:', links);        // Tabelle parsen    const tableData = [];    $('table tr').each((i, row) => {        const cells = [];        $(row).find('td, th').each((j, cell) => {            cells.push($(cell).text().trim());        });        tableData.push(cells);    });    console.log('Tabellendaten:', tableData);}

parseHTML().catch(console.error);

Vorteile von Cheerio

Hohe Leistung – arbeitet bis zu 8-mal schneller als Alternativen
Vertraute jQuery-Syntax
Geringer Speicherverbrauch
Einfache Installation und Konfiguration

Nachteile

Unterstützt keine dynamischen Inhalte
Kann kein JavaScript ausführen
Nicht geeignet für SPA-Anwendungen

2. JSDOM – vollständige DOM-Implementierung

JSDOM emuliert die Browserumgebung in Node.js und bietet eine vollständige Implementierung des DOM und HTML-Parsers. Im Gegensatz zu Cheerio kann JSDOM JavaScript ausführen, was es zum Parsen von Seiten mit dynamischen Inhalten geeignet macht.

Installation

npm install jsdom

Anwendungsbeispiel

const { JSDOM } = require('jsdom');const axios = require('axios');

async function parseWithJSDOM() {    const response = await axios.get('https://example.com');    const dom = new JSDOM(response.data);    const document = dom.window.document;        // Alle Absätze abrufen    const paragraphs = Array.from(document.querySelectorAll('p'))        .map(p => p.textContent);    console.log('Absätze:', paragraphs);        // Mit Attributen arbeiten    const images = Array.from(document.querySelectorAll('img'))        .map(img => ({            src: img.getAttribute('src'),            alt: img.getAttribute('alt')        }));    console.log('Bilder:', images);        // Skripte ausführen (Vorsicht!)    const { window } = new JSDOM(`<body>        <script>            document.body.innerHTML += '<p>Dynamischer Inhalt</p>';        </script>    </body>`, { runScripts: 'dangerously' });        console.log(window.document.body.innerHTML);}

parseWithJSDOM().catch(console.error);