Parsing HTML en TypeScript : bibliothèques, outils et exemples

Parsing HTML en TypeScript : guide complet pour le développeur

TypeScript est une surcouche de JavaScript qui ajoute un typage strict. Cependant, pour le parsing HTML (extraction de données à partir de pages web), TypeScript utilise les mêmes bibliothèques que JavaScript, mais avec la prise en charge des types. Cela rend le code plus fiable, plus clair et plus facile à maintenir. Dans cet article, nous allons passer en revue les principaux outils de parsing HTML en TypeScript, montrer des exemples de code et donner des recommandations pour choisir une bibliothèque.

Pourquoi parser du HTML en TypeScript ?

Le parsing HTML est nécessaire pour :

• La collecte de données (scraping) à partir de sites web (prix, actualités, contenu).
• L'automatisation des tests d'interfaces web.
• L'extraction d'informations à partir de fichiers HTML statiques.
• La migration de contenu entre systèmes.

TypeScript permet d'éviter les erreurs de type lors du travail avec les éléments DOM et les résultats du parsing.

Principales bibliothèques pour le parsing HTML en TypeScript

Examinons trois outils les plus populaires qui fonctionnent parfaitement avec TypeScript.

1. Cheerio

Cheerio est une bibliothèque rapide, flexible et légère qui implémente un sous-ensemble de jQuery pour travailler avec du HTML côté serveur. Elle ne nécessite pas de navigateur et est parfaitement adaptée au parsing de pages statiques. Pour TypeScript, il existe le paquet @types/cheerio avec des types prêts à l'emploi.

Installation :

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

Exemple de parsing avec Cheerio en TypeScript :

import * as cheerio from 'cheerio';

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

const title: string = $('h1.title').text();console.log(title); // Bonjour, le monde !

// Extraction typée de donnéesinterface PageData {  title: string;  links: string[];}

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

Avantages : Syntaxe jQuery, grande vitesse, taille réduite.

Inconvénients : N'exécute pas JavaScript, ne convient pas aux SPA dynamiques.

2. JSDOM

JSDOM est une émulation de l'environnement navigateur (DOM) dans Node.js. Il permet d'exécuter du JavaScript sur la page et de travailler avec une API DOM complète. TypeScript prend en charge JSDOM via le paquet @types/jsdom.

Installation :

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

Exemple de parsing avec JSDOM en TypeScript :

import { JSDOM } from 'jsdom';

const html = `<html><body><div id="content">Texte à l'intérieur</div></body></html>`;const dom = new JSDOM(html);const document = dom.window.document;

const content: string | null = document.getElementById('content')?.textContent ?? '';console.log(content); // Texte à l'intérieur

// Typage de l'élémentconst contentDiv: HTMLElement | null = document.getElementById('content');if (contentDiv) {  console.log(contentDiv.innerHTML);}

Avantages : DOM complet, prise en charge de JavaScript, correspondance précise avec le navigateur.

Inconvénients : Plus lourd que Cheerio, plus lent sur les tâches simples.

3. Puppeteer (avec TypeScript)

Puppeteer est une bibliothèque pour contrôler le navigateur Chrome/Chromium. Elle est idéale pour le parsing de pages dynamiques (React, Vue, Angular). TypeScript est pris en charge nativement.

Installation :

npm install puppeteer

Exemple de parsing avec Puppeteer en TypeScript :

import puppeteer from 'puppeteer';

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