Webscraping is het proces waarbij programmatisch gegevens uit websites worden geëxtraheerd. Hoewel veel populaire tools voor webschrapen gebruik maken van server-side technologieën zoals Python en Node.js, is het ook mogelijk om het web te scrapen met alleen JavaScript aan de clientzijde. In dit bericht onderzoeken we hoe u uw bestaande kennis van Vanilla JS kunt gebruiken om te beginnen met scrappen zonder nieuwe raamwerken te leren.
Waarom schrapen met Vanilla JavaScript?
Hier zijn enkele van de belangrijkste voordelen van schrapen met Vanilla JS:
Lage toetredingsdrempel – Als u JavaScript al kent, kunt u snel aan de slag met webscrapen zonder een nieuwe taal te leren. Vanilla JS-schrapen heeft een zachte leercurve.
Front-end focus – Voor ontwikkelaars die voornamelijk aan front-end projecten werken, kunt u met Vanilla JS scraping uw bestaande vaardigheden hergebruiken.
Lichtgewicht – Scraping aan de clientzijde vermijdt de overhead van het opzetten en onderhouden van servers om uw scrapers uit te voeren.
Draagbaarheid – Vanilla JS-scrapers kunnen rechtstreeks in de browser worden uitgevoerd, waardoor u uw scrapers eenvoudig kunt delen en implementeren.
Stealth – Schrapen aan de clientzijde kan moeilijker zijn voor websites om te detecteren en te blokkeren in vergelijking met schrapen aan de serverzijde.
Dus als je op een eenvoudige manier wilt beginnen met het extraheren van gegevens van internet met JavaScript, is Vanilla JS-scrapen een geweldige optie! Laten we vervolgens eens kijken hoe het onder de motorkap werkt.
Hoe webscraping aan de clientzijde werkt
De basisstappen voor webscrapen met Vanilla JS zijn:
Te gebruiken
fetch()om de HTML van een pagina te downloaden.Parseer de HTML met de DOM API om de gewenste gegevens te extraheren.
Transformeer en bewaar de geëxtraheerde gegevens.
Herhaal stap 1-3 voor extra pagina's.
De sleutel is dat alles rechtstreeks in de browser gebeurt in plaats van op een server. De fetch() Met de methode kunnen we verzoeken indienen om HTML te downloaden, en de DOM API biedt methoden zoals document.querySelector() om de HTML te analyseren en de gewenste gegevens eruit te halen.
We kunnen het scrapingproces starten wanneer we maar willen door onze JavaScript-scrapercode uit te voeren. De scrapinglogica draait aan de clientzijde en wordt om veiligheidsredenen in een sandbox geplaatst van de rest van de webpagina.
Laten we nu eens kijken naar een eenvoudig voorbeeld van een Vanilla JS-schraper in actie!
Een eenvoudig voorbeeld
Laten we zeggen dat we wat productgegevens van een e-commercewebsite willen schrappen. Zo kunnen we het doen met gewoon 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);
});En dat is eigenlijk alles! Met slechts een paar regels Vanilla JS konden we belangrijke gegevens van een productpagina schrapen.
Het mooie van deze aanpak is dat deze rechtstreeks gebruik maakt van de standaard webplatform-API's waarmee front-end-ontwikkelaars al bekend zijn. Geen speciale schraapbibliotheken vereist!
Laten we wat dieper ingaan op de belangrijkste stappen.
Pagina's ophalen
De eerste stap is het downloaden van de HTML van de pagina die we willen schrapen. De moderne manier om HTTP-verzoeken vanuit JavaScript te doen is met de Fetch API.
We kunnen gebruik maken fetch() om de HTML van een openbare URL te downloaden:
fetch(‘https://example.com‘)
.then(response => response.text())
.then(html => {
// now we have the HTML of the page in the html variable
});De fetch() methode retourneert een belofte die wordt omgezet in een Response-object dat de responsgegevens bevat. Roeping .text() op het antwoord wordt een belofte geretourneerd die wordt opgelost met de inhoud als tekst.
Wij zorgen voor een terugbelverzoek naar .then() om onze scrapinglogica uit te voeren wanneer de HTML gereed is.
HTML parseren
Zodra we de HTML hebben, is de volgende stap het parseren ervan om de gewenste gegevens te extraheren. De beste API voor het programmatisch analyseren van HTML-documenten in de browser is de DOM-API.
We kunnen een HTML-tekenreeks in een document parseren met behulp van de DOMParser klasse:
const parser = new DOMParser();
const doc = parser.parseFromString(html, ‘text/html‘);Deze doc variabele bevat nu een documentobject dat de geparseerde HTML vertegenwoordigt.
We kunnen DOM-methoden gebruiken zoals querySelector() om gegevens uit het document te analyseren en te extraheren:
// 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‘);De DOM API is behoorlijk uitgebreid en stelt je in staat programmatisch te simuleren hoe een mens een webpagina in de browser analyseert.
Bekijk Deze gids voor meer informatie over het gebruik van de DOM API voor het parseren en doorkruisen van HTML-documenten.
Geschrapte gegevens opslaan
Zodra we de gewenste gegevens van de pagina hebben gehaald, is de volgende stap het ergens opslaan ervan. Eenvoudige opties zijn onder meer:
- Inloggen op de console – goed voor foutopsporing
- Opslaan in een JavaScript-variabele of datastructuur
- Binnen opslaan lokale opslag – blijft bestaan tijdens sessies
- Verzenden naar een server via AJAX – bijvoorbeeld om geschraapte gegevens in een database op te slaan
Bijvoorbeeld:
// 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)
});Dit zijn dus enkele veel voorkomende patronen voor het voortzetten van de geschraapte gegevens aan de clientzijde.
Meerdere pagina's schrapen
Om meerdere pagina's te schrapen, verpakken we onze schraplogica in een functie die we iteratief kunnen aanroepen:
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));We kunnen elke pagina opeenvolgend doorlopen en schrapen, of gebruiken Promise.all() om meerdere pagina's tegelijkertijd te schrapen.
Hierdoor kunnen we hele websites programmatisch schrapen!
Headless gaan voor meer schaal
De voorbeelden tot nu toe voeren de scraping-logica rechtstreeks in de browser uit. Voor meer schaal- en runtimecontrole kunnen we onze JavaScript-scraper in een headless browseromgeving uitvoeren met behulp van een tool als poppenspeler.
Puppeteer biedt een Node.js API voor het programmatisch besturen van Chrome (of Chromium) via het DevTools-protocol. Hierdoor kunnen we scraping-scripts op een server uitvoeren terwijl we gebruik maken van de nieuwste browser-rendering-engine.
Hier is een voorbeeld van een poppenspelerscript:
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();
})();Dus nu Puppeteer de browseromgeving beheert, kunnen we onze scrapers aan de clientzijde opschalen en deze op servers in de cloud draaien.
Er zijn ook diensten zoals Apify en Toneelschrijver Wolk die gehoste omgevingen bieden die zijn geoptimaliseerd voor het uitvoeren van grootschalige scraping-taken.
Gemeenschappelijke Gotcha's
Hier zijn enkele veel voorkomende uitdagingen waar u op moet letten bij het schrapen van pagina's met Vanilla JS:
Beleid van dezelfde oorsprong – Geen toegang tot antwoordgegevens voor pagina's op verschillende domeinen. Proxy's of services zoals Apify kunnen helpen.
Asynchrone uitvoering – De uitvoering van JavaScript is asynchroon, dus u moet de scrapingstappen op de juiste manier volgen.
Dynamische pagina-inhoud – Inhoud die via JavaScript wordt geladen, is mogelijk niet aanwezig bij het eerste laden van de pagina. Mogelijk moet u wachten op evenementen zoals
DOMContentLoaded.Browserverschillen – Scripts kunnen in verschillende browsers anders worden uitgevoerd. Het is raadzaam om meerdere browsers te testen.
Schrapers detecteren – Websites proberen mogelijk scrapers te detecteren en te blokkeren met methoden zoals Browser Fingerprinting. Roterende proxy's/user-agents kunnen helpen.
Normen voor het uitsluiten van robots – Scrapers moeten standaarden zoals robots.txt respecteren. Browserextensies zoals RobotJS kunnen helpen.
Dat zijn dus enkele zaken waar u rekening mee moet houden. Over het geheel genomen biedt Vanilla JavaScript echter een zeer nuttige en toegankelijke manier om het internet te verkennen!
Ethiek schrappen
Het is belangrijk op te merken dat hoewel webscrapen zelf over het algemeen legaal is, dat wat u met de geschraapte gegevens doet, misschien niet zo is.
Zorg ervoor dat u ethisch en verantwoord schraapt. Zorg ervoor dat websites niet overmatig worden belast, respecteer robots.txt en eventuele UI-beperkingen en schend de servicevoorwaarden van websites niet.
Verzamel alleen gegevens die openbaar toegankelijk zijn en deel nooit privégegevens van geschraapte websites. Gebruik de verzamelde gegevens alleen voor persoonlijke of onderzoeksdoeleinden, niet voor commerciële doeleinden.
Het naleven van deze ethische principes helpt de levensduur van webscraping als nuttige techniek te garanderen.
Conclusie
Hier zijn enkele belangrijke punten die we hebben besproken over webscrapen met JavaScript aan de clientzijde:
Webscraping omvat het programmatisch extraheren van gegevens van websites.
Vanilla JavaScript biedt een toegankelijke manier om te beginnen met scrapen met behulp van standaard browser-API's.
De Fetch API kan pagina-HTML ophalen, en de DOM API parseert en extraheert gegevens.
Door op te slaan, te transformeren en te herhalen, kunnen websites op schaal worden geschrapt.
Headless browsers zoals Puppeteer bieden meer kracht en controle.
Het volgen van ethische principes is belangrijk bij webscrapen.
Het benutten van uw bestaande Vanilla JS-vaardigheden is dus een snelle manier om te beginnen met het extraheren van nuttige gegevens uit webpagina's. De lucht is de limiet als je eenmaal de fundamentele technieken begrijpt!
Gelukkig (ethisch) schrapen!
