HTML-Parsing in TypeScript: Bibliotheken und Beispiele |…

HTML-Parsing in TypeScript: Das richtige Werkzeug wählen

HTML-Parsing ist eine der Kernaufgaben bei der Entwicklung von Parsern, Web-Scraping, Inhaltsanalyse und Testautomatisierung. Im TypeScript- (und Node.js-) Ökosystem gibt es mehrere ausgereifte Bibliotheken, die es ermöglichen, mit HTML-Dokumenten zu arbeiten, Daten zu extrahieren, das DOM zu modifizieren und Abfragen durchzuführen. In diesem Artikel betrachten wir drei Hauptwerkzeuge: cheerio, jsdom und node-html-parser, und zeigen Beispiele ihrer Verwendung mit vollständiger Typisierung.

Warum HTML-Parsing in TypeScript?

TypeScript fügt strenge Typisierung hinzu, was besonders bei der Arbeit mit unstrukturierten Daten aus HTML nützlich ist. Sie können die Typen der extrahierten Felder genau definieren, Laufzeitfehler vermeiden und die Lesbarkeit des Codes verbessern. Bibliotheken für HTML-Parsing in TypeScript haben in der Regel integrierte Typen oder werden mit Paketen wie @types/* geliefert.

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 erstellt kein vollwertiges DOM, sondern parst HTML und bietet eine praktische API für Navigation und Manipulationen.

Installation

npm install cheerionpm install --save-dev @types/cheerio

Anwendungsbeispiel mit TypeScript

import * as cheerio from 'cheerio';

interface ParsedProduct {  title: string;  price: number;  link: string;}

const html = `  <div class="product">    <h2 class="title">Laptop</h2>    <span class="price">75000</span>    <a href="/product/1">Details</a>  </div>`;

const $ = cheerio.load(html);const products: ParsedProduct[] = [];

$('.product').each((index, element) => {  const title = $(element).find('.title').text().trim();  const priceText = $(element).find('.price').text().trim();  const price = parseFloat(priceText);  const link = $(element).find('a').attr('href') || '';

  if (title && !isNaN(price)) {    products.push({ title, price, link });  }});

console.log(products);// [{ title: 'Laptop', price: 75000, link: '/product/1' }]

Vorteile: Hohe Leistung, vertraute jQuery-Syntax, geringe Größe.

Nachteile: Unterstützt keine JavaScript-Ausführung, kein vollwertiges DOM.

2. JSDOM – Vollwertiges DOM in Node.js

JSDOM ist eine Implementierung der WHATWG DOM- und HTML-Standards in reinem JavaScript für Node.js. Es erstellt ein vollwertiges Dokument, unterstützt Skripte, Ereignisse und alle modernen Browser-APIs.

Installation

npm install jsdomnpm install --save-dev @types/jsdom

Beispiel mit Typisierung

import { JSDOM } from 'jsdom';

interface Article {  headline: string;  summary: string;  url: string;}

const html = `  <article>    <h1>TypeScript 5.0: Neue Funktionen</h1>    <p>Überblick über wichtige Änderungen und Verbesserungen</p>    <a href="/article/ts5">Lesen</a>  </article>`;

const dom = new JSDOM(html);const document = dom.window.document;

const articles: Article[] = [];const articleElements = document.querySelectorAll('article');

articleElements.forEach((article) => {  const headline = article.querySelector('h1')?.textContent?.trim() || '';  const summary = article.querySelector('p')?.textContent?.trim() || '';  const url = article.querySelector('a')?.getAttribute('href') || '';  articles.push({ headline, summary, url });});

console.log(articles);

Vorteile: Vollständige Browser-Emulation, JavaScript-Unterstützung, Arbeit mit Formularen, Ereignissen.

Nachteile: Schwergewichtiger, langsamer als cheerio, höherer Speicherverbrauch.