Le Web scraping est le processus d’extraction de données de sites Web par programmation. Bien que de nombreux outils de scraping Web populaires utilisent des technologies côté serveur telles que Python et Node.js, il est également possible de scraper le Web en utilisant uniquement du JavaScript côté client. Dans cet article, nous explorerons comment tirer parti de vos connaissances existantes de Vanilla JS pour commencer à scrapper sans apprendre de nouveaux frameworks.
Pourquoi Scraper avec Vanilla JavaScript ?
Voici quelques-uns des principaux avantages du scraping avec Vanilla JS :
Faible barrière à l'entrée – Si vous connaissez déjà JavaScript, vous pouvez vous lancer rapidement dans le web scraping sans apprendre un nouveau langage. Le scraping Vanilla JS a une courbe d’apprentissage douce.
Focus front-end – Pour les développeurs travaillant principalement sur des projets front-end, le scraping Vanilla JS vous permet de réutiliser vos compétences existantes.
Légèreté – Le scraping côté client évite les frais généraux liés à la configuration et à la maintenance des serveurs pour exécuter vos scrapers.
Portabilité – Les scrapers Vanilla JS peuvent s’exécuter directement dans le navigateur, ce qui facilite le partage et le déploiement de vos scrapers.
Stealth – Le scraping côté client peut être plus difficile à détecter et à bloquer pour les sites Web que le scraping côté serveur.
Donc, si vous souhaitez un moyen simple de commencer à extraire des données du Web avec JavaScript, le scraping Vanilla JS est une excellente option ! Voyons ensuite comment cela fonctionne sous le capot.
Comment fonctionne le Web Scraping côté client
Les étapes de base du web scraping avec Vanilla JS sont :
Utilisez
fetch()pour télécharger le HTML d'une page.Analysez le code HTML avec l'API DOM pour extraire les données souhaitées.
Transformez et stockez les données extraites.
Répétez les étapes 1 à 3 pour les pages supplémentaires.
L’essentiel est que tout se passe directement dans le navigateur plutôt que sur un serveur. Le fetch() La méthode nous permet de faire des demandes de téléchargement de HTML, et l'API DOM fournit des méthodes telles que document.querySelector() pour analyser le HTML et extraire les données souhaitées.
Nous pouvons lancer le processus de scraping quand nous le souhaitons en exécutant notre code de scraper JavaScript. La logique de scraping s'exécutera côté client et est mise en sandbox par rapport au reste de la page Web pour des raisons de sécurité.
Regardons maintenant un exemple simple d'un grattoir Vanilla JS en action !
Un exemple simple
Disons que nous souhaitons extraire certaines données produit d'un site Web de commerce électronique. Voici comment nous pourrions le faire avec du JavaScript simple :
// Fetch the HTML of the product page
fetch(‘https://example.com/products/1‘)
.then(response => response.text())
.then(html => {
// Parse the HTML with the DOM
const doc = new DOMParser().parseFromString(html, ‘text/html‘);
// Extract the product title
const title = doc.querySelector(‘h1.product-title‘).textContent;
// Extract the product description
const description = doc.querySelector(‘div.product-description‘).textContent;
// Extract the product price
const price = doc.querySelector(‘span.price‘).textContent;
// Store the data somewhere, e.g. log to console
const product = {
title,
description,
price
};
console.log(product);
});Et c’est vraiment tout ce qu’il y a à faire ! Avec seulement quelques lignes de Vanilla JS, nous avons pu extraire les données clés d'une page produit.
L’avantage de cette approche est qu’elle exploite directement les API standard de la plate-forme Web que les développeurs front-end connaissent déjà. Aucune bibliothèque de scraping spéciale requise !
Examinons un peu plus les étapes clés.
Récupération de pages
La première étape consiste à télécharger le HTML de la page que nous voulons gratter. La manière moderne d'effectuer des requêtes HTTP à partir de JavaScript consiste à utiliser Fetch API.
Nous pouvons utiliser fetch() pour télécharger le HTML de n'importe quelle URL publique :
fetch(‘https://example.com‘)
.then(response => response.text())
.then(html => {
// now we have the HTML of the page in the html variable
});La fetch() La méthode renvoie une promesse qui se résout en un objet Response contenant les données de réponse. Appel .text() sur la réponse renvoie une promesse qui se résout avec le contenu sous forme de texte.
Nous fournissons un rappel à .then() pour exécuter notre logique de scraping chaque fois que le HTML est prêt.
Analyse HTML
Une fois que nous avons le HTML, l’étape suivante consiste à l’analyser pour extraire les données souhaitées. La meilleure API pour analyser par programmation des documents HTML dans le navigateur est la API DOM.
Nous pouvons analyser une chaîne HTML dans un document en utilisant le DOMParser classe:
const parser = new DOMParser();
const doc = parser.parseFromString(html, ‘text/html‘);Ce doc La variable contient désormais un objet document représentant le code HTML analysé.
Nous pouvons utiliser des méthodes DOM comme querySelector() pour analyser et extraire des données du document :
// Select elements
const headers = doc.querySelectorAll(‘h2‘);
// Get text content
const headerText = headers[0].textContent;
// Get attribute values
const linkUrl = doc.querySelector(‘a.link‘).getAttribute(‘href‘);L'API DOM est assez étendue et vous permet de simuler par programme la façon dont un humain analyse une page Web dans le navigateur.
See pour en savoir plus sur l'utilisation de l'API DOM pour analyser et parcourir des documents HTML.
Stockage des données récupérées
Une fois que nous avons extrait les données souhaitées de la page, l’étape suivante consiste à les stocker quelque part. Les options simples incluent :
- Connexion à la console – bon pour le débogage
- Enregistrement dans une variable JavaScript ou une structure de données
- Stockage stockage local – persiste au fil des sessions
- Envoi à un serveur via AJAX – par exemple pour sauvegarder les données récupérées dans une base de données
Par exemple :
// Log to console
console.log(extractedData);
// Store in memory
let scrapedData = [];
scrapedData.push(extractedData);
// Save to localStorage
localStorage.setItem(‘data‘, JSON.stringify(extractedData));
// Send to server
fetch(‘/api/data‘, {
method: ‘POST‘,
body: JSON.stringify(extractedData)
});Voilà donc quelques modèles courants pour conserver les données récupérées côté client.
Gratter plusieurs pages
Pour gratter plusieurs pages, nous enveloppons notre logique de scraping dans une fonction que nous pouvons appeler de manière itérative :
async function scrapePage(url) {
// Fetch HTML
// Parse HTML
// Extract data
// Store data
}
const urls = [
‘https://example.com/page1‘,
‘https://example.com/page2‘,
// ...
];
// Sequentially scrape each page
for (const url of urls) {
await scrapePage(url);
}
// Or scrape multiple pages concurrently
await Promise.all(urls.map(scrapePage));Nous pouvons parcourir et gratter séquentiellement chaque page, ou utiliser Promise.all() pour gratter plusieurs pages simultanément.
Cela nous permet de supprimer des sites Web entiers par programmation !
Passer au sans tête pour plus d'échelle
Jusqu'à présent, les exemples exécutent la logique de scraping directement dans le navigateur. Pour plus de contrôle d'échelle et d'exécution, nous pouvons exécuter notre scraper JavaScript dans un environnement de navigateur sans tête à l'aide d'un outil tel que Marionnettiste.
Puppeteer fournit une API Node.js pour contrôler Chrome (ou Chromium) par programme via le protocole DevTools. Cela nous permet d'exécuter des scripts de scraping sur un serveur tout en tirant parti du dernier moteur de rendu du navigateur.
Voici un exemple de script Puppeteer :
const puppeteer = require(‘puppeteer‘);
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(‘https://example.com‘);
// Extract data from page with page.$eval()
await browser.close();
})();Ainsi, avec Puppeteer gérant l'environnement du navigateur, nous pouvons faire évoluer nos scrapers côté client et les exécuter sur des serveurs dans le cloud.
Il existe également des services comme Apifier ainsi que Nuage de dramaturge qui fournissent des environnements hébergés optimisés pour exécuter des tâches de scraping à grande échelle.
Problèmes courants
Voici quelques défis courants à surveiller lors du scraping de pages avec Vanilla JS :
Politique de même origine – Impossible d'accéder aux données de réponse pour les pages de différents domaines. Des proxys ou des services comme Apify peuvent vous aider.
Exécution asynchrone – L’exécution de JavaScript est asynchrone, vous devez donc séquencer correctement les étapes de scraping.
Contenu de la page dynamique – Le contenu chargé via JavaScript peut ne pas être présent lors du chargement initial de la page. Il faudra peut-être attendre des événements comme
DOMContentLoaded.Différences de navigateur – Les scripts peuvent s'exécuter différemment selon les navigateurs. Il est conseillé de tester plusieurs navigateurs.
Détection des grattoirs – Les sites Web peuvent essayer de détecter et de bloquer les scrapers avec des méthodes telles que Browser Fingerprinting. La rotation des proxys/user-agents peut aider.
Normes d'exclusion des robots – Les scrapers doivent respecter des normes comme robots.txt. Les extensions de navigateur comme RobotJS peuvent vous aider.
Ce sont donc des choses dont il faut être conscient. Dans l’ensemble, Vanilla JavaScript fournit un moyen très utile et accessible de commencer à gratter le Web !
Éthique à gratter
Il est important de noter que même si le web scraping lui-même est généralement légal, ce que vous faites avec les données récupérées peut ne pas l'être.
Assurez-vous de gratter de manière éthique et responsable. Évitez de provoquer une charge excessive sur les sites Web, respectez le fichier robots.txt et toutes les restrictions de l'interface utilisateur, et ne violez pas les conditions d'utilisation des sites Web.
Collectez uniquement des données accessibles au public et ne partagez jamais de données privées provenant de sites Web récupérés. Utilisez les données récupérées uniquement à des fins personnelles ou de recherche, et non à des fins commerciales.
Le respect de ces principes éthiques contribue à garantir la longévité du web scraping en tant que technique utile.
Conclusion
Voici quelques points clés que nous avons abordés concernant le web scraping avec JavaScript côté client :
Le Web scraping consiste à extraire par programme des données de sites Web.
Vanilla JavaScript fournit un moyen accessible de démarrer le scraping à l'aide des API de navigateur standard.
L'API Fetch peut récupérer la page HTML et l'API DOM analyse et extrait les données.
Le stockage, la transformation et l'itération permettent de scraper des sites Web à grande échelle.
Les navigateurs sans tête comme Puppeteer offrent plus de puissance et de contrôle.
Il est important de suivre des principes éthiques lors du web scraping.
Ainsi, tirer parti de vos compétences Vanilla JS existantes est un moyen rapide de commencer à extraire des données utiles à partir de pages Web. Il n’y a aucune limite une fois que vous comprenez les techniques fondamentales !
Bon scraping (éthique) !
