Premiers pas avec le Web Scraping en JavaScript

Publié: 2021-04-02

Le scraping Web est l'une des choses les plus intéressantes dans le monde du codage.

Qu'est-ce que le grattage Web ?

Pourquoi existe-t-il même ?

Découvrons les réponses.

Qu'est-ce que le grattage Web ?

Le grattage Web est une tâche automatisée pour extraire des données de sites Web.

Il existe de nombreuses applications du web scraping. Extraire les prix des produits et les comparer avec différentes plateformes de commerce électronique. Obtenir un devis quotidien sur le Web. Construire votre propre moteur de recherche comme Google, Yahoo, etc., la liste est longue.

Vous pouvez faire plus que vous ne le pensez avec le grattage Web. Une fois que vous savez comment extraire les données des sites Web, vous pouvez faire ce que vous voulez avec les données.

Le programme qui extrait les données des sites Web s'appelle un grattoir Web . Vous allez apprendre à écrire des grattoirs Web en JavaScript.

Le grattage Web comporte principalement deux parties.

  • Obtention des données à l'aide de bibliothèques de requêtes et d'un navigateur sans tête.
  • Analyser les données pour extraire les informations exactes que nous voulons des données.

Sans plus tarder, commençons.

Configuration du projet

Je suppose que Node est installé, sinon consultez le guide d'installation de NodeJS.

Nous allons utiliser les packages node-fetch et cheerio pour le web scraping en JavaScript. Configurons le projet avec le npm pour qu'il fonctionne avec un package tiers.

Voyons rapidement les étapes pour terminer notre configuration.

  • Créez un répertoire appelé web_scraping et accédez-y.
  • Exécutez la commande npm init pour initialiser le projet.
  • Répondez à toutes les questions en fonction de vos préférences.
  • Maintenant, installez les packages à l'aide de la commande
 npm install node-fetch cheerio

Voyons un aperçu des packages installés.

récupération de nœud

Le package node-fetch apporte le window.fetch à l'environnement node js. Cela aide à faire les requêtes HTTP et à obtenir les données brutes.

cheerio

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

Deux packages node-fetch et cheerio sont assez bons pour le scraping Web en JavaScript. Nous n'allons pas voir toutes les méthodes fournies par les packages. Nous verrons le flux de grattage Web et les méthodes les plus utiles dans ce flux.

Vous apprendrez le web scraping en le faisant. Alors, mettons-nous au travail.

Liste de la Coupe du monde de cricket de grattage

Ici, dans cette section, nous allons faire du grattage Web réel.

Qu'est-ce qu'on extrait ?

Par le titre de la section, je pense que vous le devineriez facilement. Oui, tout ce que vous pensez est correct. Extrayons tous les vainqueurs et finalistes de la coupe du monde de cricket jusqu'à présent.

  • Créez un fichier appelé extract_cricket_world_cups_list.js dans le projet.
  • Nous utiliserons la page Wikipedia Cricket World Cup pour obtenir les informations souhaitées.
  • Tout d'abord, récupérez les données brutes à l'aide du package node-fetch .
  • Le code ci-dessous obtient les données brutes de la page Wikipedia ci-dessus.
 const fetch = require("node-fetch"); // function to get the raw data const getRawData = (URL) => { return fetch(URL) .then((response) => response.text()) .then((data) => { return data; }); }; // URL for data const URL = "https://en.wikipedia.org/wiki/Cricket_World_Cup"; // start of the program const getCricketWorldCupsList = async () => { const cricketWorldCupRawData = await getRawData(URL); console.log(cricketWorldCupRawData); }; // invoking the main function getCricketWorldCupsList();

Nous avons obtenu les données brutes de l'URL. Maintenant, il est temps d'extraire les informations dont nous avons besoin à partir des données brutes. Utilisons le package cheerio pour extraire les données.

L'extraction de données impliquant des balises HTML avec Cheerio est un jeu d'enfant. Avant d'entrer dans les données réelles, voyons quelques exemples d'analyse de données à l'aide de cheerio .

  • cheerio.load 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 avons analysé le code HTML ci-dessus. Comment en extraire le contenu de la balise p ? C'est la même chose que les sélecteurs dans la manipulation du DOM JavaScript.

console.log(parsedSampleData("#title").text());

Vous pouvez sélectionner les balises comme vous le souhaitez. Vous pouvez consulter différentes méthodes sur le site officiel de cheerio.

  • Maintenant, il est temps d'extraire la liste de la coupe du monde. Pour extraire les informations, nous devons connaître les balises HTML que les informations se trouvent sur la page. Accédez à la page Wikipédia de la coupe du monde de cricket et inspectez la page pour obtenir des informations sur les balises HTML.

Voici le code complet.

 const fetch = require("node-fetch"); const cheerio = require("cheerio"); // function to get the raw data const getRawData = (URL) => { return fetch(URL) .then((response) => response.text()) .then((data) => { return data; }); }; // URL for data const URL = "https://en.wikipedia.org/wiki/Cricket_World_Cup"; // start of the program const getCricketWorldCupsList = async () => { const cricketWorldCupRawData = await getRawData(URL); // parsing the data const parsedCricketWorldCupData = cheerio.load(cricketWorldCupRawData); // extracting the table data const worldCupsDataTable = parsedCricketWorldCupData("table.wikitable")[0] .children[1].children; console.log("Year --- Winner --- Runner"); worldCupsDataTable.forEach((row) => { // extracting `td` tags if (row.name === "tr") { let year = null, winner = null, runner = null; const columns = row.children.filter((column) => column.name === "td"); // extracting year const yearColumn = columns[0]; if (yearColumn) { year = yearColumn.children[0]; if (year) { year = year.children[0].data; } } // extracting winner const winnerColumn = columns[3]; if (winnerColumn) { winner = winnerColumn.children[1]; if (winner) { winner = winner.children[0].data; } } // extracting runner 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}`); } } }); }; // invoking the main function getCricketWorldCupsList();

Et voici les données grattées.

 Year --- Winner --- Runner 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

Cool, c'est pas ça ?

Gabarit de grattage

L'obtention des données brutes à partir de l'URL est courante dans tous les projets de grattage Web. La seule partie qui change est l'extraction des données selon l'exigence. Vous pouvez essayer le code ci-dessous comme modèle.

 const fetch = require("node-fetch"); const cheerio = require("cheerio"); const fs = require("fs"); // function to get the raw data const getRawData = (URL) => { return fetch(URL) .then((response) => response.text()) .then((data) => { return data; }); }; // URL for data const URL = "https://example.com/"; // start of the program const scrapeData = async () => { const rawData = await getRawData(URL); // parsing the data const parsedData = cheerio.load(rawData); console.log(parsedData); // write code to extract the data // here // ... // ... }; // invoking the main function scrapeData();

Conclusion

Vous avez appris à gratter une page Web. Maintenant, c'est à votre tour de vous entraîner à coder.

Je suggérerais également de consulter les frameworks de grattage Web populaires pour explorer et les solutions de grattage Web basées sur le cloud.

Bon codage

MOTS CLÉS:
  • JavaScript