Parsing et scraping de données en JavaScript : du débutant au pro

Pourquoi parser des données en JavaScript si Python existe ?

Salut, l'ami ! Si tu lis ce texte, tu connais probablement déjà Python et ses bibliothèques comme BeautifulSoup ou Scrapy. Mais que faire si tu tombes sur une tâche où Python montre ses limites ? Par exemple, collecter des données sur un site entièrement construit avec React ou Angular. Toutes les informations sont chargées via JavaScript, et le HTML source est vide. C'est là que JavaScript entre en scène !

Le parsing et le scraping de données en JavaScript ne sont pas qu'une simple tendance, c'est une nécessité absolue pour travailler avec les applications web modernes. Node.js permet d'exécuter un moteur de navigateur directement sur le serveur, de manipuler le DOM, de cliquer sur des boutons et d'attendre le chargement de contenu asynchrone. Dans cet article, nous allons explorer les outils réels et écrire du code que vous pourrez utiliser immédiatement dans vos projets.

Prêts à transformer JavaScript en un puissant aspirateur à données ? C'est parti !

Outils principaux pour le scraping en JavaScript

Avant d'écrire du code, faisons connaissance avec les principaux « combattants » de notre arsenal. Pour le parsing de données en JavaScript, nous utiliserons trois piliers :

\n
• Axios — un client HTTP pour envoyer des requêtes et récupérer le code HTML des pages.
\n
• Cheerio — une bibliothèque rapide et légère pour parser le HTML, qui fonctionne comme jQuery côté serveur.
\n
• Puppeteer — un navigateur headless complet (Chrome) capable d'exécuter JavaScript, de cliquer, de faire défiler et d'attendre.
\n

Pour les pages statiques, Axios + Cheerio suffisent. Si le site charge des données via AJAX ou nécessite une authentification, utilisez Puppeteer. Passons maintenant à la pratique.

Exemple 1 : Parsing simple d'une page statique avec Cheerio

Supposons que nous devions collecter les titres d'actualités d'un site qui renvoie le HTML directement (sans dynamique). Installons les dépendances :

npm install axios cheerio

Écrivons maintenant un script qui extrait tous les titres h2 de la page d'accueil (remplacez l'URL par une réelle) :

const axios = require('axios');\nconst cheerio = require('cheerio');\n\nasync function parseStaticPage(url) {\n    try {\n        const { data } = await axios.get(url);\n        const $ = cheerio.load(data);\n\n        const titles = [];\n        $('h2').each((i, el) => {\n            titles.push($(el).text().trim());\n        });\n\n        console.log('Titres trouvés :');\n        titles.forEach((title, index) => {\n            console.log(`${index + 1}. ${title}`);\n        });\n    } catch (error) {\n        console.error('Erreur de parsing :', error.message);\n    }\n}\n\nparseStaticPage('https://example.com/news');

Ce code est la base par laquelle commencer l'apprentissage du scraping de données en JavaScript. Cheerio est très rapide, mais ne peut pas exécuter de scripts. Si le site affiche « Chargement... », lisez la suite.

Exemple 2 : Parsing de pages dynamiques avec Puppeteer

Imaginons maintenant que les données n'apparaissent qu'après que l'utilisateur a fait défiler la page ou cliqué sur le bouton « Afficher plus ». Pour ce type de tâches, Puppeteer est idéal. Installons-le :

npm install puppeteer

Scénario : nous allons sur une page de produits, attendons 3 secondes (le temps que le JS se charge), puis collectons les noms des produits :

const puppeteer = require('puppeteer');\n\nasync function parseDynamicPage(url) {\n    const browser = await puppeteer.launch({ headless: true });\n    const page = await browser.newPage();\n\n    await page.goto(url, { waitUntil: 'networkidle2' });\n    // Attendre l'apparition du contenu (sélecteur .product-title)\n    await page.waitForSelector('.product-title', { timeout: 10000 });\n\n    const items = await page.evaluate(() => {\n        const titles = [];\n        document.querySelectorAll('.product-title').forEach(el => {