Il web scraping è il processo di estrazione programmatica dei dati dai siti web. Sebbene molti popolari strumenti di web scraping utilizzino tecnologie lato server come Python e Node.js, è anche possibile effettuare il web scraping utilizzando solo JavaScript lato client. In questo post esploreremo come sfruttare la tua conoscenza esistente di Vanilla JS per iniziare lo scraping senza apprendere nuovi framework.
Perché raschiare con Vanilla JavaScript?
Ecco alcuni dei principali vantaggi dello scraping con Vanilla JS:
Bassa barriera all'ingresso – Se conosci già JavaScript, puoi iniziare rapidamente con il web scraping senza imparare una nuova lingua. Lo scraping Vanilla JS ha una curva di apprendimento delicata.
Focus sul front-end – Per gli sviluppatori che lavorano principalmente su progetti front-end, lo scraping Vanilla JS consente di riutilizzare le competenze esistenti.
Leggero – Lo scraping lato client evita il sovraccarico di configurazione e manutenzione dei server per eseguire i tuoi scraper.
Portabilità – Gli scraper Vanilla JS possono essere eseguiti direttamente nel browser, semplificando la condivisione e la distribuzione degli scraper.
Stealth – Lo scraping lato client può essere più difficile da rilevare e bloccare per i siti Web rispetto allo scraping lato server.
Quindi, se desideri un modo semplice per iniziare a estrarre dati dal Web con JavaScript, lo scraping Vanilla JS è un'ottima opzione! Quindi diamo un'occhiata a come funziona sotto il cofano.
Come funziona il web scraping lato client
I passaggi fondamentali per il web scraping con Vanilla JS sono:
Usa il
fetch()per scaricare l'HTML di una pagina.Analizza l'HTML con l'API DOM per estrarre i dati desiderati.
Trasforma e archivia i dati estratti.
Ripetere i passaggi 1-3 per pagine aggiuntive.
La chiave è che tutto avviene direttamente nel browser anziché su un server. IL fetch() Il metodo ci consente di effettuare richieste per scaricare HTML e l'API DOM fornisce metodi come document.querySelector() per analizzare l'HTML ed estrarre i dati che desideriamo.
Possiamo avviare il processo di scraping ogni volta che vogliamo eseguendo il nostro codice di scraping JavaScript. La logica di scraping verrà eseguita sul lato client ed è protetta dal resto della pagina Web per motivi di sicurezza.
Ora diamo un'occhiata a un semplice esempio di un raschietto Vanilla JS in azione!
Un semplice esempio
Diciamo che vogliamo recuperare alcuni dati di prodotto da un sito di e-commerce. Ecco come potremmo farlo con il semplice JavaScript:
// 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);
});E questo è davvero tutto! Con solo poche righe di Vanilla JS, siamo riusciti a estrarre i dati chiave da una pagina di prodotto.
L'aspetto positivo di questo approccio è che sfrutta direttamente le API della piattaforma Web standard con cui gli sviluppatori front-end hanno già familiarità. Non sono richieste librerie di scraping speciali!
Esaminiamo un po' di più i passaggi chiave.
Recupero pagine
Il primo passo è scaricare l'HTML della pagina che vogliamo raschiare. Il modo moderno per effettuare richieste HTTP da JavaScript è con il file Fetch API.
Possiamo usare fetch() per scaricare l'HTML di qualsiasi URL pubblico:
fetch(‘https://example.com‘)
.then(response => response.text())
.then(html => {
// now we have the HTML of the page in the html variable
});I fetch() Il metodo restituisce una promessa che si risolve in un oggetto Response contenente i dati di risposta. Chiamando .text() nella risposta restituisce una promessa che si risolve con il contenuto come testo.
Forniamo una richiamata a .then() per eseguire la nostra logica di scraping ogni volta che l'HTML è pronto.
Analisi dell'HTML
Una volta ottenuto l'HTML, il passaggio successivo è analizzarlo per estrarre i dati desiderati. La migliore API per analizzare a livello di codice i documenti HTML nel browser è la API DOM.
Possiamo analizzare una stringa HTML in un documento utilizzando il comando DOMParser classe:
const parser = new DOMParser();
const doc = parser.parseFromString(html, ‘text/html‘);La sezione doc la variabile ora contiene un oggetto documento che rappresenta l'HTML analizzato.
Possiamo usare metodi DOM come querySelector() per analizzare ed estrarre dati dal documento:
// 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 è piuttosto estesa e consente di simulare a livello di codice il modo in cui un essere umano analizza una pagina Web nel browser.
See questa guida per ulteriori informazioni sull'utilizzo dell'API DOM per l'analisi e l'attraversamento dei documenti HTML.
Memorizzazione dei dati raschiati
Una volta estratti i dati desiderati dalla pagina, il passaggio successivo è archiviarli da qualche parte. Le opzioni semplici includono:
- Accesso alla console: utile per il debug
- Salvataggio in una variabile JavaScript o in una struttura dati
- Conservazione localStorage – persiste tra le sessioni
- Invio a un server tramite AJAX – ad esempio per salvare i dati raschiati in un database
Per esempio:
// 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)
});Quindi questi sono alcuni modelli comuni per persistere i dati raschiati lato client.
Raschiare più pagine
Per raschiare più pagine, racchiudiamo la nostra logica di raschiamento in una funzione che possiamo chiamare iterativamente:
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));Possiamo scorrere e raschiare in sequenza ogni pagina o utilizzare Promise.all() per raschiare più pagine contemporaneamente.
Questo ci consente di analizzare interi siti Web in modo programmatico!
Andare senza testa per una maggiore scala
Gli esempi finora eseguono la logica di scraping direttamente nel browser. Per un maggiore controllo su scala e runtime, possiamo eseguire il nostro raschietto JavaScript in un ambiente browser headless utilizzando uno strumento come burattinaio.
Puppeteer fornisce un'API Node.js per il controllo di Chrome (o Chromium) a livello di codice tramite il protocollo DevTools. Ciò ci consente di eseguire script di scraping su un server sfruttando al tempo stesso il motore di rendering del browser più recente.
Ecco un esempio di 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();
})();Pertanto, con Puppeteer che gestisce l'ambiente del browser, possiamo ampliare i nostri scraper lato client ed eseguirli su server nel cloud.
Ci sono anche servizi come Apifica ed Drammaturgo Nuvola che forniscono ambienti ospitati ottimizzati per l'esecuzione di lavori di scraping su larga scala.
Trucchi comuni
Ecco alcune sfide comuni a cui prestare attenzione quando si raschiano pagine con Vanilla JS:
Politica della stessa origine – Impossibile accedere ai dati di risposta per pagine su domini diversi. Proxy o servizi come Apify possono aiutare.
Esecuzione asincrona – L'esecuzione di JavaScript è asincrona, quindi è necessario sequenziare correttamente i passaggi di scraping.
Contenuto dinamico della pagina – Il contenuto caricato tramite JavaScript potrebbe non essere presente al caricamento iniziale della pagina. Potrebbe essere necessario attendere eventi come
DOMContentLoaded.Differenze del browser – Gli script possono essere eseguiti in modo diverso tra i browser. Si consiglia di testare più browser.
Rilevamento dei raschiatori – I siti Web potrebbero tentare di rilevare e bloccare gli scraper con metodi come il Fingerprinting del browser. La rotazione dei proxy/agenti utente può aiutare.
Standard di esclusione dei robot – Gli scraper dovrebbero rispettare standard come robots.txt. Le estensioni del browser come RobotJS possono aiutare.
Quindi queste sono alcune cose di cui essere consapevoli. Nel complesso, tuttavia, Vanilla JavaScript fornisce un modo molto utile e accessibile per iniziare a raschiare il web!
Etica raschiante
È importante notare che, sebbene il web scraping stesso sia generalmente legale, ciò che fai con i dati raschiati potrebbe non esserlo.
Assicurati di raschiare in modo etico e responsabile. Evita di causare un carico eccessivo sui siti web, rispetta il file robots.txt e qualsiasi restrizione dell'interfaccia utente e non violare i termini di servizio dei siti web.
Raccogli solo dati accessibili pubblicamente e non condividere mai dati privati da siti Web piratati. Utilizzare i dati raccolti solo per scopi personali o di ricerca, non per vantaggi commerciali.
L'adesione a questi principi etici aiuta a garantire la longevità del web scraping come tecnica utile.
Conclusione
Ecco alcuni punti chiave che abbiamo trattato sul web scraping con JavaScript lato client:
Il web scraping implica l'estrazione programmatica di dati dai siti web.
Vanilla JavaScript fornisce un modo accessibile per iniziare lo scraping utilizzando le API del browser standard.
L'API Fetch può recuperare il codice HTML della pagina e l'API DOM analizza ed estrae i dati.
L'archiviazione, la trasformazione e l'iterazione consentono di eseguire lo scraping di siti Web su larga scala.
I browser headless come Puppeteer forniscono maggiore potenza e controllo.
Seguire i principi etici è importante durante il web scraping.
Quindi sfruttare le tue competenze esistenti su Vanilla JS è un modo rapido per iniziare a estrarre dati utili dalle pagine web. Il cielo è il limite una volta comprese le tecniche fondamentali!
Buon raschiamento (etico)!
