Premiers pas avec le Web Scraping en JavaScript

Photo of author

By pierre



Le *web scraping*, ou aspiration web, se révèle être une discipline captivante au sein de l’univers de la programmation.

Mais qu’est-ce que le *web scraping* précisément ?

Et quelle est sa raison d’être ?

Explorons ensemble ces interrogations.

Qu’est-ce que l’Aspiration Web ?

Le *web scraping* désigne le processus automatisé d’extraction de données à partir de sites web.

Les applications du *web scraping* sont multiples. On peut citer l’extraction de tarifs de produits pour les comparer sur différentes plateformes d’e-commerce, la récupération de cours de change quotidiens, ou encore la construction de moteurs de recherche personnalisés, similaires à Google ou Yahoo. Les possibilités sont vastes.

Les capacités offertes par le *web scraping* sont plus étendues qu’il n’y paraît. Une fois maîtrisée l’extraction de données, vous avez la liberté de les exploiter comme vous le souhaitez.

L’outil qui réalise l’extraction de données à partir de sites web est appelé un *scraper web*. Nous allons nous concentrer sur la création de *scrapers web* en JavaScript.

Le *web scraping* se divise en deux étapes principales :

  • La récupération des données à l’aide de bibliothèques de requêtes et d’un navigateur *headless*.
  • L’analyse des données afin d’extraire les informations précises recherchées.

Sans plus attendre, plongeons dans le vif du sujet.

Mise en Place du Projet

Nous partons du principe que Node.js est installé. Si ce n’est pas le cas, veuillez vous référer au guide d’installation de NodeJS.

Pour le *web scraping* en JavaScript, nous allons utiliser les packages *node-fetch* et *cheerio*. Initialisons le projet avec npm pour pouvoir intégrer des packages tiers.

Voici un aperçu des étapes pour notre configuration :

  • Créez un répertoire nommé *web_scraping* et naviguez vers celui-ci.
  • Exécutez la commande *npm init* pour initialiser le projet.
  • Répondez aux questions selon vos préférences.
  • Installez les packages avec la commande :
npm install node-fetch cheerio

Passons en revue les fonctionnalités des packages installés.

node-fetch

Le package *node-fetch* permet d’intégrer la fonction *window.fetch* dans l’environnement Node.js. Il facilite l’envoi de requêtes HTTP et la réception de données brutes.

cheerio

Le package cheerio est utilisé pour analyser et extraire les informations pertinentes à partir des données brutes.

Ces deux packages, *node-fetch* et *cheerio*, constituent une base solide pour le *web scraping* en JavaScript. Nous n’allons pas détailler toutes les méthodes offertes par ces packages, mais nous allons aborder le processus général du *web scraping* et les méthodes clés dans ce contexte.

L’apprentissage du *web scraping* se fait par la pratique. Passons donc à l’action.

Aspiration de la Liste des Vainqueurs de la Coupe du Monde de Cricket

Dans cette section, nous allons concrètement réaliser une opération de *web scraping*.

Que souhaitons-nous extraire ?

Le titre de cette section donne un indice. En effet, nous allons extraire la liste des vainqueurs et finalistes des coupes du monde de cricket ayant eu lieu jusqu’à présent.

  • Créez un fichier nommé *extract_cricket_world_cups_list.js* au sein de votre projet.
  • Nous utiliserons la page Wikipédia sur la Coupe du Monde de Cricket pour récupérer les données souhaitées.
  • Commencez par récupérer les données brutes via le package *node-fetch*.
  • Le code ci-dessous permet de récupérer les données brutes de la page Wikipédia.
const fetch = require("node-fetch");

// Fonction pour récupérer les données brutes
const getRawData = (URL) => {
   return fetch(URL)
      .then((response) => response.text())
      .then((data) => {
         return data;
      });
};

// URL de la page à scraper
const URL = "https://en.wikipedia.org/wiki/Cricket_World_Cup";

// Point d'entrée du programme
const getCricketWorldCupsList = async () => {
   const cricketWorldCupRawData = await getRawData(URL);
   console.log(cricketWorldCupRawData);
};

// Appel de la fonction principale
getCricketWorldCupsList();

Nous avons obtenu les données brutes à partir de l’URL. Il est temps à présent d’extraire les informations qui nous intéressent. Pour ce faire, nous allons utiliser le package *cheerio*.

L’extraction de données à partir de balises HTML avec *cheerio* est particulièrement aisée. Avant de nous plonger dans le vif du sujet, examinons quelques exemples d’analyse de données avec *cheerio*.

  • Analysez les données HTML à l’aide de la méthode *cheerio.load*.
const parsedSampleData = cheerio.load(
      `<div id="container"><p id="title">I'm title</p></div>`
   );
  • Nous venons d’analyser le code HTML ci-dessus. Comment extraire le contenu de la balise <p> ? La méthode est semblable aux sélecteurs dans la manipulation du DOM en JavaScript.

console.log(parsedSampleData(« #title »).text());

Vous pouvez sélectionner les balises en utilisant divers sélecteurs. Vous pouvez retrouver toutes les méthodes disponibles sur le site officiel de Cheerio.

  • Il est maintenant temps d’extraire la liste des vainqueurs de la coupe du monde. Afin d’extraire les informations, il est nécessaire de connaître les balises HTML au sein desquelles se trouvent les données. Visitez la page Wikipédia de la coupe du monde de cricket et inspectez la page pour obtenir ces informations.

Voici le code complet :

const fetch = require("node-fetch");
const cheerio = require("cheerio");

// Fonction pour récupérer les données brutes
const getRawData = (URL) => {
   return fetch(URL)
      .then((response) => response.text())
      .then((data) => {
         return data;
      });
};

// URL de la page à scraper
const URL = "https://en.wikipedia.org/wiki/Cricket_World_Cup";

// Point d'entrée du programme
const getCricketWorldCupsList = async () => {
   const cricketWorldCupRawData = await getRawData(URL);

   // Analyse des données
   const parsedCricketWorldCupData = cheerio.load(cricketWorldCupRawData);

   // Extraction des données du tableau
   const worldCupsDataTable = parsedCricketWorldCupData("table.wikitable")[0]
      .children[1].children;

   console.log("Année --- Vainqueur --- Finaliste");
   worldCupsDataTable.forEach((row) => {
      // Extraction des balises `td`
      if (row.name === "tr") {
         let year = null,
            winner = null,
            runner = null;

         const columns = row.children.filter((column) => column.name === "td");

         // Extraction de l'année
         const yearColumn = columns[0];
         if (yearColumn) {
            year = yearColumn.children[0];
            if (year) {
               year = year.children[0].data;
            }
         }

         // Extraction du vainqueur
         const winnerColumn = columns[3];
         if (winnerColumn) {
            winner = winnerColumn.children[1];
            if (winner) {
               winner = winner.children[0].data;
            }
         }

         // Extraction du finaliste
         const runnerColumn = columns[5];
         if (runnerColumn) {
            runner = runnerColumn.children[1];
            if (runner) {
               runner = runner.children[0].data;
            }
         }

         if (year && winner && runner) {
            console.log(`${year} --- ${winner} --- ${runner}`);
         }
      }
   });
};

// Appel de la fonction principale
getCricketWorldCupsList();

Voici les données récupérées :

Année --- Vainqueur --- Finaliste
1975 --- West Indies --- Australia
1979 --- West Indies --- England
1983 --- India --- West Indies
1987 --- Australia --- England
1992 --- Pakistan --- England
1996 --- Sri Lanka --- Australia
1999 --- Australia --- Pakistan
2003 --- Australia --- India
2007 --- Australia --- Sri Lanka
2011 --- India --- Sri Lanka
2015 --- Australia --- New Zealand
2019 --- England --- New Zealand

Impressionnant, n’est-ce pas ?

Modèle de Base pour le Scraping

L’obtention des données brutes à partir d’une URL est une étape commune à tous les projets de *web scraping*. Seule l’extraction des données varie en fonction des besoins. Vous pouvez utiliser le code ci-dessous comme modèle générique.

const fetch = require("node-fetch");
const cheerio = require("cheerio");
const fs = require("fs");
// Fonction pour récupérer les données brutes
const getRawData = (URL) => {
   return fetch(URL)
      .then((response) => response.text())
      .then((data) => {
         return data;
      });
};
// URL de la page à scraper
const URL = "https://example.com/";
// Point d'entrée du programme
const scrapeData = async () => {
   const rawData = await getRawData(URL);
   // Analyse des données
   const parsedData = cheerio.load(rawData);
   console.log(parsedData);
   // Écrivez votre code d'extraction des données ici
   // ...
   // ...
};
// Appel de la fonction principale
scrapeData();

Conclusion

Vous avez découvert comment *scraper* une page web. Il ne vous reste plus qu’à pratiquer.

Je vous encourage également à explorer les frameworks de *web scraping* populaires ainsi que les solutions de *scraping* basées sur le cloud.

Bon codage 🙂

Avez-vous apprécié cet article ? N’hésitez pas à le partager !