Récupération Web est le processus de sélection extraction de données de site Internet ou toute autre source en ligne. Il est étroitement lié au crawling Web, qui vise à suivre les pages Web via des hyperliens et utiliser les informations pour l’indexation.
Dans une enquête, 65% des développeurs déclaré qu’ils utilisent Javascript. C’est sans doute le langage de programmation le plus couramment utilisé dans le monde puisque les sites Web s’appuient sur JavaScript pour fournir leurs fonctions.
Dans cet article, vous apprendrez à explorer et à gratter des sites Web en JavaScript à l’aide de Node.js. Continuez à lire pour en savoir plus.
Comment explorer et gratter des sites Web en JavaScript ?
Le grattage et l’exploration Web seront faciles avec ce guide convivial pour les débutants. Cependant, avant de commencer à gratter, il y a quelques exigences que vous devez avoir.
Ces exigences sont les suivantes :
- Node.js – Cela permet à JavaScript de s’exécuter en dehors de la console du navigateur Chrome, car JavaScript ne fonctionnait que sur Chrome à l’époque. Vous pouvez aller sur leur site et télécharger la dernière version.
- Éditeur de code ou IDE – C’est l’endroit où vous pouvez écrire vos codes JavaScript. Il est recommandé d’utiliser Code VS pour la simplicité. Cependant, vous pouvez utiliser n’importe quel éditeur de code que vous connaissez.
Assurez-vous de tester d’abord pour voir si ces deux sont installés correctement. Vous pouvez le faire dans votre invite de commande sous Windows ou Terminal sur Mac.
Tapez simplement la commande nœud -vet vous devriez obtenir ce résultat :
Vous pouvez maintenant créer votre propre scraper JavaScript en suivant les étapes ci-dessous :
|
NOTE: Pour illustrer l’ensemble du processus, ce guide grattera notre site Web – TechJury.net. |
1. Créez un dossier pour votre projet
Vous devez créer un dossier dans lequel vous pouvez enregistrer vos fichiers JavaScript pour le grattage. Pour ce faire, suivez ces étapes :
1. Créez un dossier où vous voulez. Ce sera votre espace de travail pour votre projet de scraper Web. Vous pouvez le nommer Projet Webscraper.
2. Lancez votre code VS.
3. Cliquez sur Dossier ouvert, puis choisissez le dossier que vous avez créé
4. Pour créer votre premier fichier JavaScript, cliquez sur le symbole pour Nouveau fichier. Vous pouvez le nommer comme vous voulez.
Assurez-vous d’ajouter le .js rallonge (exemple : webscraper.js). Ce fichier devrait s’ouvrir automatiquement.
5. Pour vous faciliter la tâche, vous pouvez utiliser le Terminal du code VS. Cliquer sur Terminal sur les options du haut, puis cliquez sur Nouvelle borne.
Votre espace de travail devrait ressembler à ceci :
2. Installez les bibliothèques pour le grattage
Une bibliothèque contient une collection de codes pré-écrits pour rendre la programmation plus rapide et plus efficace. Il existe de nombreuses bibliothèques dans Node.js pour le scraping.
Voici quelques-uns des plus populaires :
- Cheerio – habitué extrait données en analysant un Code HTML dans ses éléments.
- Axios – cela sert à faire requêtes HTTP, ce qui le rend bon pour ramper.
- Marionnettiste – simule un vrai Chrome mais en tant que navigateur sans tête, ce qui signifie pas d’interface. Vous pouvez utiliser Puppeteer pour automatiser les activités d’exploration Web comme si vous naviguiez dans Google Chrome.
L’étape suivante utilisera Cheerio et Axios. Pour les installer, tapez cette commande sur votre terminal VS Code :
|
npm installer cheerio axios |
Après cela, vous pouvez passer au code réel.
3. Envoyer une requête HTTP
La première chose que votre code scraper doit faire est d’importer Cheerio et Axios pour accéder à leurs fonctionnalités.
Ce sera le début du code :
|
const axios = requiert(‘axios’); const cheerio = require(‘cheerio’); |
Disons que nous prévoyons de récupérer des informations sur le noms et descriptions des auteurs du TechJury.
Pour ce faire, votre programme doit envoyer une requête HTTP au site Web cible, comme indiqué ci-dessous :
|
fonction asynchrone scrapeData() { essayer { URL const= »https://techjury.net/« ; // Remplacez par l’URL du site Web que vous souhaitez récupérer en-têtes const = { ‘User-Agent’ : ‘Mozilla/5.0 (Windows NT 10.0 ; Win64 ; x64) AppleWebKit/537.36 (KHTML, comme Gecko) Chrome/96.0.4664.93 Safari/537.36’ } ; réponse const = attendre axios.get(url, { en-têtes }); const $ = cheerio.load(response.data); constante auteurs = []; |
L’URL pour envoyer la demande est définie sur https://techjury.net/. Un En-tête HTTP avec le agent utilisateur est également ajouté pour le faire ressembler à une demande valide d’un vrai navigateur.
Le « const auteurs” est utilisé pour enregistrer les tableaux de résultats que vous allez obtenir. La prochaine chose à faire maintenant est d’identifier les données pertinentes de la Contenu HTML.
4. Sélectionnez les éléments en HTML
Allez sur la page d’accueil de TechJury. Ayez une idée de ce à quoi cela ressemble. La section où vous voyez la liste des auteurs et leurs descriptions est ce que vous devez gratter.
Pour analyser complètement la structure de la page, vous devez ouvrir les DevTools de votre navigateur.
Faites un clic droit sur un espace vide et sélectionnez le Inspecter option. Il devrait ouvrir le DevTool sous le Éléments section. Vous y verrez la structure HTML du site Web telle que rendue par le navigateur.
Voici à quoi cela ressemble au moment de la rédaction:
Rappelez-vous que vous essayez d’obtenir les noms des auteurs et les descriptions. Pour ce faire, vous devez trouver le Sélecteurs CSS qui contiennent les informations dont vous avez besoin.
Sélecteurs CSS sont des identifiants où les scripts de style CSS doivent être appliqués (comme une police spécifique pour une section spécifique). Cela permettra à Cheerio de sélectionner ces éléments et d’extraire leurs données.
Dans cette capture d’écran, les noms des auteurs reçoivent la classe « nom d’utilisateur » et les descriptions d’auteur sont dans la classe « description.” Ils relèvent tous les deux du «card__author » récipient.
5. Grattez les données pertinentes
Maintenant que vous avez identifié les sélecteurs nécessaires, il est temps de saisir le code qui extraira ces données.
Voici un exemple de code :
|
// Utilisez les sélecteurs Cheerio pour cibler les éléments contenant des informations sur l’auteur $(‘.card__author‘).each((indice, élément) => { const nom_auteur = $(element).find(‘.nom d’utilisateur‘).texte(); const authorDescription = $(element).find(‘.description‘).texte(); auteurs.push({ nom : nom de l’auteur, description : auteurDescription }); }); |
Depuis card_authorchoisissez les sélecteurs nom d’utilisateur et description pour extraire les données pertinentes en conséquence.
auteurs.push permet de charger les informations recueillies dans le auteurs déployer. Maintenant, il ne vous reste plus qu’à organiser les données collectées.
6. Convertissez les résultats en JSON
Le prochain morceau de code de votre programme de grattage Web convertira les données extraites au format JSON. Cela sera utile pour les transferts de données sur les API.
|
// Convertir les données scrapées en JSON const jsonData = JSON.stringify(auteurs, null, 2); console.log(‘Données supprimées (JSON):\n’, jsonData); |
Voici une autre pièce pour détecter les erreurs :
|
attrape (erreur) { console.error(‘Erreur :’, erreur); } |
Le code final devrait aider à afficher les erreurs. Vous pouvez rencontrer des erreurs sur les sites qui utilisent des mesures anti-scraping, comme demande d’une seule page (SPA) des pages Web telles que Facebook ou Google.
7. Exécutez le code
Il est maintenant temps d’exécuter le code. Cependant, assurez-vous de revoir le code global avant de l’exécuter.
Voici à quoi cela devrait ressembler :
|
constante axios = exiger(‘axios’); constante cheerio = exiger(‘cheerio’); asynchrone fonction scrapeData() { essayer { constante URL = ‘https://techjury.net/’; // Remplacez par l’URL du site Web que vous souhaitez gratter constante en-têtes = { ‘Agent utilisateur’: ‘Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, comme Gecko) Chrome/96.0.4664.93 Safari/537.36’ } ; constante réponse = attendre axios.obtenir(URL{ en-têtes }); constante $ = cheerio.charger(réponse.données); constante auteurs = []; // Utilisez les sélecteurs Cheerio pour cibler les éléments contenant des informations sur l’auteur $(‘.card__author’).chaque((indice, élément) => { constante nom de l’auteur = $(élément).trouver(‘.nom d’utilisateur’).texte(); constante auteurDescription = $(élément).trouver(‘.description’).texte(); auteurs.pousser({ nom: nom de l’auteur, description: auteurDescription }); }); // Convertir les données scrapées en JSON constante jsonData = JSON.stringifier(auteurs, nul, 2); console.enregistrer(‘Données récupérées (JSON) :\n‘, jsonData); } attraper (erreur) { console.erreur(‘Erreur:’, erreur); } } scrapeData(); |
Vous pouvez exécuter le code dans le terminal intégré de votre code VS. Tapez simplement noeud webscraper.js. Vous pouvez utiliser le nom du fichier JavaScript au cas où vous en auriez choisi un autre.
Le résultat devrait ressembler à ceci :
Une fois cela fait, vous pouvez conclure que votre premier projet de web scraping en JavaScript est terminé.
Conclusion
Les sites changent constamment. Rappelez-vous que la même méthode peut ne pas fonctionner à l’avenir.
La bonne chose est que les étapes ci-dessus devraient vous donner une idée générale du fonctionnement du grattage et de l’exploration Web en JavaScript.