Web scraping en JavaScript : Guide complet

Pour faire du web scraping en JavaScript, tu as besoin de Node.js et d’une bibliothèque adaptée à ta cible. Utilise Cheerio pour les pages statiques et Puppeteer ou Playwright dès que le contenu est rendu côté client.

Ce guide te montre comment installer, coder et exécuter ton premier scraper, étape par étape.

Prérequis pour faire du web scraping en JavaScript

Avant d’écrire ton premier script JS, deux outils de base suffisent pour démarrer.

• Node.js : un environnement d’exécution JavaScript open-source et multiplateforme. Il te permet de lancer du code JS en dehors d’un navigateur, directement depuis ta console. Télécharge-le sur la documentation officielle de Node.js.
• npm (Node Package Manager) : le gestionnaire de paquets intégré à Node. Il sert à installer tes bibliothèques avec une simple commande npm install.

Une fois Node.js en place, tu choisis une bibliothèque selon le type de page web à scraper. Voici les plus utilisées.

• Cheerio : parfaite pour le scraping de pages statiques. Elle analyse le HTML brut avec une syntaxe proche de jQuery. Elle est légère, rapide et simple, mais n’exécute pas le JavaScript de la page. Voir la documentation Cheerio.
• Puppeteer et Playwright : idéales pour les sites dynamiques. Elles pilotent un vrai navigateur headless (Chrome ou Firefox) et chargent la page comme un utilisateur réel. Voir la documentation Puppeteer.

La règle est simple : Cheerio pour les pages statiques, Puppeteer ou Playwright dès qu’un site charge ses données en JavaScript.

Comment faire du web scraping en JavaScript ?

Le principe est direct : tu récupères le HTML d’une page web, tu cibles les éléments qui t’intéressent, puis tu extrais les données. Le choix de l’outil repose sur un seul critère : la page est-elle statique ou dynamique ?

Étape 1 : Installation et configuration

Commence par télécharger Node.js depuis le site officiel, puis installe-le. Vérifie ensuite l’installation dans ton terminal :

node -v
npm -v

Si les deux versions s’affichent, tout est bon. Crée maintenant ton projet :

mkdir mon-scraping
cd mon-scraping
npm init -y

Cette commande génère un fichier package.json qui listera tes dépendances. Il ne reste plus qu’à installer les bibliothèques adaptées à ton besoin.

Pour une page statique (contenu déjà présent dans le HTML renvoyé par le serveur), utilise axios et Cheerio :

npm install axios cheerio

Pour une page dynamique (données chargées via JavaScript côté client, comme React, Vue ou Angular), installe plutôt Puppeteer :

npm install puppeteer

Étape 2 : Création d’un script de scraping

Avant de coder ton script JS, identifie les bons sélecteurs CSS. Ouvre la page web cible dans Chrome ou Firefox, fais un clic droit sur l’élément voulu, puis choisis « Inspecter ». Le DOM s’affiche : tu repères ainsi la balise, la classe (.classe) ou l’identifiant (#id) à cibler.

Scraping d’une page statique avec Cheerio

Cheerio lit uniquement le HTML brut et n’exécute aucun script JS. Sur un site rendu côté client, il ne verra qu’une page vide.

// Importer les bibliothèques
const axios = require('axios');
const cheerio = require('cheerio');

// URL de la page à scraper
const url = "https://exemple.com";

// Fonction principale
async function scrapePage() {
  try {
    // Télécharger le contenu HTML
    const { data } = await axios.get(url);

    // Charger le HTML avec Cheerio
    const $ = cheerio.load(data);

    // Exemple : récupérer tous les titres h1
    const titres = [];
    $("h1").each((i, elem) => {
      titres.push($(elem).text().trim());
    });

    // Afficher les résultats
    console.log("Titres trouvés :", titres);

  } catch (error) {
    console.error("Erreur lors du scraping :", error);
  }
}

// Lancer le script
scrapePage();

Remplace https://exemple.com par l’URL de ton choix, puis adapte le sélecteur $("h1") pour cibler ce qui t’intéresse : $("p") pour les paragraphes, .classe ou #id pour un élément précis. La méthode .text() renvoie le textContent de l’élément, l’équivalent de jQuery côté serveur.

Scraping d’une page dynamique avec Puppeteer

Puppeteer pilote un vrai navigateur headless et attend que le JavaScript ait fini de charger le contenu, là où Cheerio échoue.

// Importer Puppeteer
const puppeteer = require("puppeteer");

// URL de la page à scraper
const url = "https://exemple.com";

async function scrapePage() {
  // Lancer un navigateur sans interface graphique (headless)
  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();

  try {
    // Aller sur la page
    await page.goto(url, { waitUntil: "networkidle2" });

    // Exemple : extraire le texte de tous les titres h1
    const titres = await page.$$eval("h1", elements =>
      elements.map(el => el.textContent.trim())
    );

    console.log("Titres trouvés :", titres);

  } catch (error) {
    console.error("Erreur lors du scraping :", error);
  } finally {
    // Fermer le navigateur
    await browser.close();
  }
}

// Lancer le script
scrapePage();

L’option waitUntil: "networkidle2" attend la fin des requêtes réseau avant d’extraire les données de la page web.

Étape 3 : Gestion des données extraites

Une fois les données récupérées, tu peux les sauvegarder en JSON pour une base de données, ou en CSV pour les ouvrir dans Excel. Le module fs est natif de Node.js et ne nécessite aucune installation. Pour le CSV, ajoute simplement la bibliothèque json2csv :

npm install json2csv

const axios = require("axios");
const cheerio = require("cheerio");
const fs = require("fs");
const { Parser } = require("json2csv");

const url = "https://exemple.com";

async function scrapeAndSave() {
  try {
    // Récupérer le HTML de la page
    const { data } = await axios.get(url);
    const $ = cheerio.load(data);

    // Extraire les titres dans un tableau d'objets
    const resultats = [];
    $("h1").each((i, elem) => {
      resultats.push({ titre: $(elem).text().trim() });
    });

    // Sauvegarde en JSON
    fs.writeFileSync("resultats.json", JSON.stringify(resultats, null, 2), "utf-8");
    console.log("Données sauvegardées dans resultats.json");

    // Sauvegarde en CSV
    const parser = new Parser();
    const csv = parser.parse(resultats);
    fs.writeFileSync("resultats.csv", csv, "utf-8");
    console.log("Données sauvegardées dans resultats.csv");

  } catch (error) {
    console.error("Erreur lors du scraping :", error);
  }
}

scrapeAndSave();

Ce script JS fait tout d’un coup : il récupère la page web, extrait les données HTML, puis écrit deux fichiers. Le bloc try / catch gère les erreurs pour éviter qu’un timeout ou un CAPTCHA ne fasse planter l’ensemble du script de scraping.

Les bonnes pratiques du web scraping en JavaScript

Avant de lancer tes scripts, quelques réflexes simples gardent ton scraping JS efficace, stable et respectueux des conditions d’utilisation des sites visés. Il est aussi important de t’assurer que ta démarche est légale selon le contexte.

• Respecter le fichier robots.txt : c’est la règle d’or. Avant de scraper une page web, ouvre https://exemple.com/robots.txt. Si le chemin visé est en Disallow, ne le scrape pas. Tu évites ainsi les soucis éthiques et juridiques.
• Espacer tes requêtes : ne bombarde pas le site. Ajoute un délai entre chaque appel pour rester discret et éviter d’être bloqué.
• Personnaliser ton User-Agent : par défaut, un scraper JS se fait vite repérer. Avec Puppeteer, définis un en-tête réaliste via page.setUserAgent() pour imiter un vrai navigateur.
• Gérer les erreurs et les blocages : enveloppe tes appels dans un bloc try / catch pour éviter qu’un timeout ou un CAPTCHA ne fasse planter tout le script.

Quelles sont les alternatives à prendre en compte ?

Le web scraping ne se limite pas à JavaScript. Selon ton projet, d’autres langages ou outils peuvent mieux répondre à ton besoin.

• Python : les bibliothèques Scrapy et BeautifulSoup font des merveilles pour extraire du contenu de nombreuses pages web.
• PHP : pratique si tu veux intégrer le scraping directement dans un site déjà codé dans ce langage.
• Outils sans code comme Bright Data, Octoparse et Apify : ils te permettent de scraper des données web sans écrire une seule ligne de code.

API de scraping ou solution DIY : que choisir ?

La vraie question n’est pas le langage, mais le niveau de complexité que tu es prêt à gérer toi-même. Ton propre script de scraping avec Puppeteer ou Cheerio reste la meilleure option quand le volume est faible et le site peu protégé.

Une API de scraping (comme celle proposée par Bright Data) devient plus pertinente dès que tu affrontes des blocages avancés : rotation d’adresses IP, résolution automatique de CAPTCHA, rendu JavaScript à grande échelle.

En résumé : le DIY te fait économiser de l’argent et t’apprend beaucoup. L’API te fait gagner du temps sur les projets lourds ou récurrents.

FAQ

Quel est le meilleur outil de web scraping en JavaScript ?

Tout dépend du type de page web que tu veux scraper.

• Cheerio : rapide et léger, parfait pour analyser le HTML des pages statiques.
• Puppeteer : idéal pour piloter un vrai navigateur Chrome et gérer le contenu rendu en JavaScript.
• Playwright : proche de Puppeteer, mais avec le support multi-navigateurs (Chrome, Firefox, WebKit) et des fonctions avancées supplémentaires.

Quel est le meilleur langage de programmation pour le scraping ?

Il n’y a pas de meilleur langage universel. Le choix dépend de ton projet et de ton environnement.

• Python : très populaire pour les projets rapides et les gros volumes de données web.
• JavaScript : le bon réflexe si tu travailles déjà dans l’écosystème web avec Node.js.
• PHP : pratique pour intégrer le scraping directement dans un site existant.

Le web scraping en JavaScript reste un excellent choix pour collecter des données web, que tu passes par Cheerio, Puppeteer ou Playwright.

Pour aller plus loin sans écrire de code, jette un œil à nos guides sur Bright Data, Octoparse et Apify.