Analyse HTML en TypeScript : bibliothèques, méthodes et exemples de code

Analyse HTML en TypeScript : choisir son outil

L'analyse HTML est l'une des tâches clés lors du développement de parseurs, de web scraping, d'analyse de contenu et d'automatisation de tests. Dans l'écosystème TypeScript (et Node.js), il existe plusieurs bibliothèques matures qui permettent de travailler avec des documents HTML, d'extraire des données, de modifier le DOM et d'effectuer des requêtes. Dans cet article, nous examinerons trois outils principaux : cheerio, jsdom et node-html-parser, et nous montrerons des exemples de leur utilisation avec un typage complet.

Pourquoi l'analyse HTML en TypeScript ?

TypeScript ajoute un typage strict, ce qui est particulièrement utile lors du travail avec des données non structurées provenant du HTML. Vous pouvez définir précisément les types des champs extraits, éviter les erreurs d'exécution et améliorer la lisibilité du code. Les bibliothèques d'analyse HTML en TypeScript ont généralement des types intégrés ou sont fournies avec les packages @types/*.

1. Cheerio — un parseur léger et rapide

Cheerio est une bibliothèque rapide, flexible et légère qui implémente un sous-ensemble de jQuery pour le côté serveur. Elle ne crée pas un DOM complet, mais analyse le HTML et fournit une API pratique pour la navigation et les manipulations.

Installation

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

Exemple d'utilisation avec TypeScript

import * as cheerio from 'cheerio';

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

const html = `  <div class="product">    <h2 class="title">Ordinateur portable</h2>    <span class="price">75000</span>    <a href="/product/1">Plus de détails</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: 'Ordinateur portable', price: 75000, link: '/product/1' }]

Avantages : haute performance, syntaxe jQuery familière, taille réduite.

Inconvénients : ne prend pas en charge l'exécution de JavaScript, pas de DOM complet.

2. JSDOM — un DOM complet dans Node.js

JSDOM est une implémentation des standards WHATWG DOM et HTML en JavaScript pur pour Node.js. Il crée un document complet, prend en charge les scripts, les événements et toutes les API modernes du navigateur.

Installation

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

Exemple avec typage

import { JSDOM } from 'jsdom';

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

const html = `  <article>    <h1>TypeScript 5.0 : nouvelles fonctionnalités</h1>    <p>Aperçu des changements et améliorations clés</p>    <a href="/article/ts5">Lire</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);

Avantages : émulation complète du navigateur, prise en charge de JavaScript, travail avec les formulaires, les événements.

Inconvénients : plus lourd, plus lent que cheerio, consomme plus de mémoire.

3. node-html-parser — un parseur natif rapide