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

Parsing HTML en TypeScript : aperçu des meilleures bibliothèques et outils

Le parsing HTML est l'une des tâches clés lors du développement d'applications web modernes, en particulier dans les domaines du web scraping, de l'automatisation des tests et de l'analyse de données. TypeScript, en tant que surcouche typée statiquement de JavaScript, offre aux développeurs des outils puissants pour un traitement sûr et efficace des documents HTML. Dans cet article, nous examinerons les principales bibliothèques pour le parsing HTML en TypeScript, leurs caractéristiques, avantages et exemples d'utilisation.

Pourquoi le parsing HTML en TypeScript est-il nécessaire ?

TypeScript ajoute un typage strict, ce qui est particulièrement utile lors du travail avec des structures HTML complexes. Cela permet de :

• Éviter les erreurs d'exécution liées à un accès incorrect aux éléments du DOM
• Améliorer l'autocomplétion dans l'IDE
• Créer un code plus lisible et maintenable
• S'intégrer facilement avec les frameworks modernes (Angular, React, Vue)

Bibliothèques populaires pour le parsing HTML

1. Cheerio

Cheerio est une bibliothèque rapide, flexible et légère qui implémente un sous-ensemble de jQuery côté serveur. Elle est idéale pour le parsing de documents HTML statiques.

Installation :

npm install cheerionpm install @types/cheerio -D

Exemple d'utilisation :

import * as cheerio from 'cheerio';

const html = `  <div class="container">    <h1>Titre</h1>    <p class="content">Texte du paragraphe</p>    <ul>      <li>Élément 1</li>      <li>Élément 2</li>    </ul>  </div>`;

const $ = cheerio.load(html);

// Extraction du titreconst title = $('h1').text();console.log(title); // "Titre"

// Extraction de tous les éléments de la listeconst items: string[] = [];$('li').each((index, element) => {  items.push($(element).text());});console.log(items); // ["Élément 1", "Élément 2"]

// Recherche par classeconst content = $('.content').text();console.log(content); // "Texte du paragraphe"

2. JSDOM

JSDOM est une implémentation complète du DOM et de l'API HTML sur Node.js. Contrairement à Cheerio, il émule un environnement de navigateur, ce qui permet d'exécuter du code JavaScript à l'intérieur de la page HTML.

Installation :

npm install jsdomnpm install @types/jsdom -D

Exemple d'utilisation :

import { JSDOM } from 'jsdom';

const html = `  <!DOCTYPE html>  <html>    <body>      <div id="app">        <span class="data">Valeur 1</span>        <span class="data">Valeur 2</span>      </div>    </body>  </html>`;

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

// Obtention de l'élément par IDconst app = document.getElementById('app');console.log(app?.textContent); // "Valeur 1Valeur 2"

// Utilisation de querySelectorconst firstData = document.querySelector('.data');console.log(firstData?.textContent); // "Valeur 1"

// Obtention de tous les éléments par classeconst allData = document.querySelectorAll('.data');const values: string[] = [];allData.forEach(el => values.push(el.textContent || ''));console.log(values); // ["Valeur 1", "Valeur 2"]

3. Node-html-parser

Node-html-parser est un parseur HTML rapide et simple écrit en TypeScript. Il ne nécessite aucune dépendance externe et convient parfaitement aux tâches où la performance est importante.

Installation :

npm install node-html-parser

Exemple d'utilisation :

import { parse } from 'node-html-parser';

const html = `  <table>    <tr>      <td>Cellule 1</td>      <td>Cellule 2</td>    </tr>    <tr