Parsing HTML en JavaScript (Node.js)

Parsing HTML en JavaScript (Node.js) : guide complet

Le parsing HTML est l'une des compétences clés du développeur web moderne. Dans l'écosystème Node.js, il existe plusieurs outils puissants pour extraire des données de documents HTML. Dans cet article, nous analyserons en détail trois bibliothèques principales : Cheerio, JSDOM et Puppeteer, et nous apprendrons à choisir l'outil adapté à chaque tâche spécifique.

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 est idéale pour le parsing de HTML statique, lorsque l'exécution de JavaScript sur la page n'est pas nécessaire.

Installation

npm install cheerio

Exemple d'utilisation

const cheerio = require('cheerio');const axios = require('axios');

async function parseHTML() {    const response = await axios.get('https://example.com');    const $ = cheerio.load(response.data);        // Extraction du titre de la page    const title = $('title').text();    console.log('Titre :', title);        // Obtention de tous les liens    const links = [];    $('a').each((i, el) => {        links.push($(el).attr('href'));    });    console.log('Liens :', links);        // Parsing d'un tableau    const tableData = [];    $('table tr').each((i, row) => {        const cells = [];        $(row).find('td, th').each((j, cell) => {            cells.push($(cell).text().trim());        });        tableData.push(cells);    });    console.log('Données du tableau :', tableData);}

parseHTML().catch(console.error);

Avantages de Cheerio

Haute performance — fonctionne jusqu'à 8 fois plus vite que les alternatives
Syntaxe jQuery familière
Faible consommation de mémoire
Installation et configuration simples

Inconvénients

Ne prend pas en charge le contenu dynamique
Ne peut pas exécuter JavaScript
Ne convient pas aux applications SPA

2. JSDOM — une implémentation DOM complète

JSDOM émule l'environnement du navigateur dans Node.js, fournissant une implémentation complète du DOM et un parseur HTML. Contrairement à Cheerio, JSDOM peut exécuter JavaScript, ce qui le rend adapté au parsing de pages avec du contenu dynamique.

Installation

npm install jsdom

Exemple d'utilisation

const { JSDOM } = require('jsdom');const axios = require('axios');

async function parseWithJSDOM() {    const response = await axios.get('https://example.com');    const dom = new JSDOM(response.data);    const document = dom.window.document;        // Obtention de tous les paragraphes    const paragraphs = Array.from(document.querySelectorAll('p'))        .map(p => p.textContent);    console.log('Paragraphes :', paragraphs);        // Travail avec les attributs    const images = Array.from(document.querySelectorAll('img'))        .map(img => ({            src: img.getAttribute('src'),            alt: img.getAttribute('alt')        }));    console.log('Images :', images);        // Exécution de scripts (attention !)    const { window } = new JSDOM(`<body>        <script>            document.body.innerHTML += '<p>Contenu dynamique</p>';        </script>    </body>`, { runScripts: 'dangerously' });        console.log(window.document.body.innerHTML);}

parseWithJSDOM().catch(console.error);