Avant de commencer, vous devez respecter les lois et réglementations locales et ne pas supprimer les données divulguées sans autorisation.
Voici quelques éléments dont vous aurez besoin pour ce didacticiel :
Cheerio est un outil d'analyse HTML et XML dans Node.js. Il est très populaire sur GitHub et compte plus de 23 000 étoiles.
C’est rapide, flexible et facile à utiliser. Puisqu'il implémente un sous-ensemble de JQuery, il est facile de démarrer avec Cheerio si vous êtes déjà familier avec JQuery.
La principale différence entre Cheerio et un navigateur Web est que Cheerio ne génère pas de rendu visuel, ne charge pas de CSS, ne charge pas de ressources externes et n'exécute pas de JavaScript. Il analyse simplement le balisage et fournit une API pour manipuler les structures de données résultantes. Cela explique pourquoi c'est aussi très rapide - documentation cheerio.
Si vous souhaitez utiliser cheerio pour récupérer des pages Web, vous devez d'abord utiliser un package comme axios ou node-fetch pour obtenir les balises.
Dans cet exemple, nous explorerons les codes ISO 3166-1 alpha-3 pour tous les pays et autres juridictions répertoriés sur cette page Wikipédia. Il se trouve sous la section de code actuelle de la page ISO 3166-1 alpha-3.
Voici à quoi ressemble la liste des pays/juridictions et leurs codes correspondants :
Dans cette étape, vous allez créer un répertoire pour votre projet en exécutant la commande suivante sur le terminal. Cette commande créera un fichier nommé learn-cheerio . Vous pouvez lui donner un nom différent si vous le souhaitez.
mkdir learn-cheerio
learn-cheerio Après avoir exécuté avec succès la commande ci-dessus, vous devriez pouvoir voir un dossier nommé créé.
Dans l'étape suivante, vous ouvrirez le répertoire que vous venez de créer dans votre éditeur de texte préféré et initialiserez le projet.
Dans cette étape, vous accéderez au répertoire du projet et initialiserez le projet. Ouvrez le répertoire que vous avez créé à l'étape précédente dans votre éditeur de texte préféré et initialisez le projet en exécutant la commande suivante.
npm init -y
Une exécution réussie de la commande ci-dessus créera un fichier package.json à la racine du répertoire du projet.
À l'étape suivante, vous installerez les dépendances du projet.
Dans cette étape, vous installerez les dépendances du projet en exécutant la commande suivante. Cela prendra quelques minutes, alors soyez patient.
npm i axios cheerio Pretty
L'exécution réussie de la commande ci-dessus enregistrera trois dépendances dans le fichier sous le champ package.json . dependencies première dépendance est axios , la seconde est cheerio et la troisième est pretty .
axios est un client http très populaire qui peut s'exécuter dans les nœuds et les navigateurs. Nous en avons besoin car cheerio est un analyseur de jetons.
Pour que Cheerio analyse les balises et explore les données dont vous avez besoin, nous avons besoin axios pour obtenir les balises du site Web. Si vous préférez, vous pouvez utiliser un autre client HTTP pour obtenir le jeton. Il n'est pas nécessaire que ce soit axios .
Pretty est un package npm pour embellir le balisage afin qu'il soit lisible une fois imprimé sur le terminal.
Dans la section suivante, vous examinerez les balises à partir desquelles les données seront récupérées.
Avant de récupérer les données d'une page Web, il est important de comprendre la structure HTML de la page.
Dans cette étape, vous examinez la structure HTML de la page Web à partir de laquelle vous souhaitez extraire des données.
Accédez à la page des codes ISO 3166-1 alpha-3 sur Wikipédia. Dans la section « Codes actuels », vous trouverez une liste de pays et leurs codes correspondants. CTRL + SHIFT + I Vous pouvez ouvrir DevTools en appuyant sur la combinaison de touches sur Chrome ou en cliquant avec le bouton droit et en sélectionnant l'option "Inspecter".
Voici ma liste dans Chrome DevTools :
Dans la section suivante, vous écrirez le code pour explorer le Web.
Dans cette section, vous écrirez le code pour récupérer les données qui nous intéressent. Exécutez d’abord la commande suivante qui créera le fichier app.js
touch app.js
L'exécution réussie de la commande ci-dessus créera un fichier app.js dans le répertoire racine du répertoire du projet.
Comme tout autre package Node, vous devez d'abord exiger axios , cheerio et axios avant de commencer à les utiliser. Vous pouvez le faire en ajoutant le code suivant en haut du fichier que vous venez de créer pretty . app.js
const axios = require("axios");
const cheerio = require("cheerio");
const Pretty = require("pretty"); Avant d'écrire le code pour récupérer les données, nous devons apprendre cheerio . Nous allons analyser le balisage ci-dessous et essayer de manipuler la structure de données résultante. Cela nous aidera à apprendre la syntaxe Cheerio et ses méthodes les plus couramment utilisées.
Le balisage ci-dessous est ul li qui contient notre élément.
balisage const = ` <ul class="fruits"> <li class="fruits__mango"> Mangue </li> <li class="fruits__apple"> Pomme </li> </ul> `;
Ajoutez la déclaration de variable ci-dessus au fichier app.js
cheerio pouvez charger des balises en utilisant la méthode cheerio.load . Cette méthode prend le marqueur comme paramètre. Il nécessite également deux paramètres facultatifs supplémentaires. Si vous êtes intéressé, vous pouvez en savoir plus à leur sujet dans la documentation.
Ci-dessous, nous passons le premier et unique paramètre obligatoire et stockons la valeur de retour dans la variable $ . Nous utilisons cette variable en raison de la similitude de cheerio avec Jquery $ . Vous pouvez utiliser différents noms de variables si vous le souhaitez.
Ajoutez le code suivant à votre fichier app.js :
const $ = cheerio.load(markup); console.log(pretty($.html()));
Si vous exécutez maintenant le code dans le node app.js en exécutant la commande app.js sur le terminal, vous devriez pouvoir voir le balisage sur le terminal. Voilà ce que je vois sur le terminal :
Cheerio prend en charge les sélecteurs CSS les plus courants, tels que les sélecteurs class , id et element . Dans le code ci-dessous, nous sélectionnons un élément avec la classe fruits__mango puis enregistrons l'élément sélectionné sur la console. Ajoutez le code suivant à votre fichier app.js
const mangue = $(".fruits__mango");
console.log(mango.html()); // Mango Si vous utilisez l'exécution de commandes, la ligne de code ci-dessus enregistrera le texte Mango sur le terminal. app.js``node app.js
Vous pouvez également sélectionner un élément et obtenir des attributs spécifiques tels que class , id ou tous les attributs et leurs valeurs correspondantes.
Ajoutez le code suivant à votre fichier app.js :
const apple = $(".fruits__apple");
console.log(apple.attr("class")); // Le code ci-dessus fruits__apple se connectera au terminal fruits__apple . fruits__apple est la classe de l'élément sélectionné.
Cheerio fournit la méthode .each pour parcourir plusieurs éléments sélectionnés.
Ci-dessous, nous sélectionnons tous les éléments et les parcourons en utilisant la méthode li . .each nous enregistrons le contenu textuel de chaque élément de la liste sur le terminal.
Ajoutez le code suivant à votre fichier app.js
const listItems = $("li");
console.log(listItems.length); // 2
listItems.each(fonction (idx, el) {
console.log($(el).text());
});
//Mangue
// Le code d'Apple ci-dessus enregistrera 2 , qui est la longueur de l'élément de liste. Après avoir exécuté le code, le texte Mango et sera affiché sur le terminal. Apple``app.js
Cheerio fournit un moyen d'ajouter ou d'ajouter des éléments au balisage.
La méthode append ajoutera l'élément passé en paramètre après le dernier élément enfant de l'élément sélectionné. D'un autre côté, prepend ajoutera l'élément passé avant le premier enfant de l'élément sélectionné.
Ajoutez le code suivant à votre fichier app.js :
const ul = $("ul");
ul.append("<li>Banane</li>");
ul.prepend("<li>Ananas</li>");
console.log(pretty($.html())); Après avoir ajouté et ajouté des éléments au balisage, voici ce que je vois lorsque je me connecte $.html() :
Ce sont les bases de Cheerio pour vous lancer dans le web scraping. Pour récupérer les données de Wikipédia que nous avons décrites au début de cet article, copiez et collez le code suivant dans le fichier app.js :
// Chargement des dépendances Nous n'avons pas besoin de joli.
// parce que nous n'enregistrerons pas le HTML sur le terminal
const axios = require("axios");
const cheerio = require("cheerio");
const fs = require("fs");
// URL de la page que nous voulons gratter
const url = "https://en.wikipedia.org/wiki/ISO_3166-1_alpha-3";
// Fonction asynchrone qui gratte les données
fonction asynchrone scrapeData() {
essayer {
// Récupère le HTML de la page que nous voulons gratter
const { data } = attendre axios.get(url);
// Charge le HTML que nous avons récupéré dans la ligne précédente
const $ = cheerio.load(données);
// Sélectionne tous les éléments de la liste dans la classe plainlist
const listItems = $(".plainlist ul li");
// Stocke les données pour tous les pays
const pays = [];
// Utilisez la méthode .each pour parcourir le li que nous avons sélectionné
listItems.each((idx, el) => {
// Objet contenant des données pour chaque pays/juridiction
const country = { nom : "", iso3 : "" };
// Sélectionnez le contenu textuel des éléments a et span
// Stocke le contenu du texte dans l'objet ci-dessus
country.name = $(el).children("a").text();
country.iso3 = $(el).children("span").text();
// Remplir le tableau des pays avec les données du pays
pays.push(pays);
});
// Enregistre le tableau des pays sur la console
console.dir(pays);
// Écrit le tableau des pays dans le fichier country.json
fs.writeFile("coutries.json", JSON.stringify(countries, null, 2), (err) => {
si (erreur) {
console.erreur(erreur);
retour;
}
console.log("Données écrites avec succès dans le fichier");
});
} attraper (erreur) {
console.erreur(erreur);
}
}
//Appelle la fonction ci-dessus
scrapeData(); En lisant le code, comprenez-vous ce qui se passe ? Sinon, je vais entrer dans les détails maintenant. J'ai également commenté chaque ligne de code pour vous aider à comprendre.
Dans le code ci-dessus, nous avons besoin de toutes les dépendances en haut du fichier app.js puis nous déclarons la fonction scrapeData . À l'intérieur de la fonction, le HTML récupéré de la page que nous devons gratter est ensuite chargé dans cheerio en utilisant axios .
La liste des pays et leurs codes iso3 correspondants sont imbriqués dans un élément div avec la classe plainlist . Les éléments li sont sélectionnés et nous les parcourons ensuite en utilisant la méthode .each . Les données de chaque pays sont récupérées et stockées dans un tableau.
Après avoir exécuté le code ci-dessus à l'aide de la commande node app.js , les données capturées sont écrites dans le fichier countries.json et imprimées sur le terminal. Cela fait partie de ce que je vois sur le terminal :
Merci d'avoir lu cet article ! Nous avons déjà abordé l'utilisation cheerio . Si vous souhaitez approfondir et comprendre pleinement son fonctionnement, vous pouvez consulter la documentation de Cheerio.