HTML-Parsing in TypeScript: Bibliotheken, Werkzeuge und Beispiele

HTML-Parsing in TypeScript: Vollständiger Leitfaden für Entwickler

TypeScript ist eine Erweiterung von JavaScript, die eine strenge Typisierung hinzufügt. Für das Parsen von HTML (Datenextraktion aus Webseiten) verwendet TypeScript jedoch dieselben Bibliotheken wie JavaScript, jedoch mit Typunterstützung. Dies macht den Code zuverlässiger, verständlicher und wartungsfreundlicher. In diesem Artikel werden wir die wichtigsten Werkzeuge zum HTML-Parsing in TypeScript untersuchen, Codebeispiele zeigen und Empfehlungen zur Auswahl einer Bibliothek geben.

Warum HTML in TypeScript parsen?

HTML-Parsing ist notwendig für:

• Datensammlung (Scraping) von Websites (Preise, Nachrichten, Inhalte).
• Automatisierung von Web-UI-Tests.
• Extraktion von Informationen aus statischen HTML-Dateien.
• Migration von Inhalten zwischen Systemen.

TypeScript hilft, Typfehler bei der Arbeit mit DOM-Elementen und Parsing-Ergebnissen zu vermeiden.

Wichtige Bibliotheken zum HTML-Parsing in TypeScript

Betrachten wir drei der beliebtesten Werkzeuge, die hervorragend mit TypeScript funktionieren.

1. Cheerio

Cheerio ist eine schnelle, flexible und leichtgewichtige Bibliothek, die eine Teilmenge von jQuery für die Arbeit mit HTML auf der Serverseite implementiert. Sie benötigt keinen Browser und eignet sich hervorragend zum Parsen statischer Seiten. Für TypeScript gibt es das Paket @types/cheerio mit vorgefertigten Typen.

Installation:

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

Beispiel für das Parsen mit Cheerio in TypeScript:

import * as cheerio from 'cheerio';

const html = `<html><body><h1 class="title">Hallo, Welt!</h1></body></html>`;const $ = cheerio.load(html);

const title: string = $('h1.title').text();console.log(title); // Hallo, Welt!

// Typisierte Datenextraktioninterface PageData {  title: string;  links: string[];}

const data: PageData = {  title: $('h1').text(),  links: $('a').map((i, el) => $(el).attr('href')).get()};

Vorteile: jQuery-Syntax, hohe Geschwindigkeit, geringe Größe.

Nachteile: Führt kein JavaScript aus, nicht geeignet für dynamische SPAs.

2. JSDOM

JSDOM ist eine Emulation der Browserumgebung (DOM) in Node.js. Es ermöglicht die Ausführung von JavaScript auf der Seite und die Arbeit mit der vollständigen DOM-API. TypeScript unterstützt JSDOM über das Paket @types/jsdom.

Installation:

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

Beispiel für das Parsen mit JSDOM in TypeScript:

import { JSDOM } from 'jsdom';

const html = `<html><body><div id="content">Text innen</div></body></html>`;const dom = new JSDOM(html);const document = dom.window.document;

const content: string | null = document.getElementById('content')?.textContent ?? '';console.log(content); // Text innen

// Typisierung des Elementsconst contentDiv: HTMLElement | null = document.getElementById('content');if (contentDiv) {  console.log(contentDiv.innerHTML);}

Vorteile: Vollständiges DOM, JavaScript-Unterstützung, genaue Browser-Entsprechung.

Nachteile: Schwerer als Cheerio, langsamer bei einfachen Aufgaben.

3. Puppeteer (mit TypeScript)

Puppeteer ist eine Bibliothek zur Steuerung des Chrome/Chromium-Browsers. Sie ist ideal zum Parsen dynamischer Seiten (React, Vue, Angular). TypeScript wird standardmäßig unterstützt.

Installation:

npm install puppeteer

Beispiel für das Parsen mit Puppeteer in TypeScript:

import puppeteer from 'puppeteer';

async function parsePage(url: string): Promise<string> {  const browser = await puppeteer.