Unter Web Scraping versteht man das programmgesteuerte Extrahieren von Daten aus Websites. Während viele beliebte Web-Scraping-Tools serverseitige Technologien wie Python und Node.js nutzen, ist es auch möglich, das Web nur mit clientseitigem JavaScript zu crawlen. In diesem Beitrag erfahren Sie, wie Sie Ihr vorhandenes Wissen über Vanilla JS nutzen können, um mit dem Scraping zu beginnen, ohne neue Frameworks erlernen zu müssen.
Warum mit Vanilla-JavaScript scrapen?
Hier sind einige der wichtigsten Vorteile des Scrapings mit Vanilla JS:
Niedrige Eintrittsbarriere – Wenn Sie bereits JavaScript beherrschen, können Sie schnell mit Web Scraping beginnen, ohne eine neue Sprache zu lernen. Vanilla JS Scraping hat eine sanfte Lernkurve.
Front-End-Fokus – Für Entwickler, die hauptsächlich an Front-End-Projekten arbeiten, können Sie mit Vanilla JS Scraping Ihre vorhandenen Fähigkeiten wiederverwenden.
Leichtgewicht – Clientseitiges Scraping vermeidet den Aufwand für die Einrichtung und Wartung von Servern zum Ausführen Ihrer Scraper.
Tragbarkeit – Vanilla JS-Scraper können direkt im Browser ausgeführt werden, sodass Sie Ihre Scraper ganz einfach teilen und bereitstellen können.
Stealth – Clientseitiges Scraping kann für Websites schwieriger zu erkennen und zu blockieren sein als serverseitiges Scraping.
Wenn Sie also eine einfache Möglichkeit suchen, mit JavaScript mit dem Extrahieren von Daten aus dem Web zu beginnen, ist Vanilla JS Scraping eine großartige Option! Schauen wir uns als nächstes an, wie es unter der Haube funktioniert.
So funktioniert clientseitiges Web Scraping
Die grundlegenden Schritte für Web Scraping mit Vanilla JS sind:
Verwenden Sie die
fetch()um den HTML-Code einer Seite herunterzuladen.Analysieren Sie den HTML-Code mit der DOM-API, um die gewünschten Daten zu extrahieren.
Transformieren und speichern Sie die extrahierten Daten.
Wiederholen Sie die Schritte 1–3 für weitere Seiten.
Der Schlüssel liegt darin, dass alles direkt im Browser und nicht auf einem Server geschieht. Der fetch() Mit der Methode können wir Anfragen zum Herunterladen von HTML stellen, und die DOM-API bietet Methoden wie document.querySelector() um den HTML-Code zu analysieren und die gewünschten Daten abzurufen.
Wir können den Scraping-Vorgang jederzeit starten, indem wir unseren JavaScript-Scraper-Code ausführen. Die Scraping-Logik wird auf der Clientseite ausgeführt und aus Sicherheitsgründen in einer Sandbox vom Rest der Webseite getrennt.
Schauen wir uns nun ein einfaches Beispiel eines Vanilla JS-Schabers in Aktion an!
Ein einfaches Beispiel
Nehmen wir an, wir möchten einige Produktdaten von einer E-Commerce-Website extrahieren. So könnten wir es mit einfachem JavaScript machen:
// 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);
});Und das ist wirklich alles! Mit nur wenigen Zeilen Vanilla JS konnten wir wichtige Daten von einer Produktseite extrahieren.
Das Tolle an diesem Ansatz ist, dass er direkt die Standard-Webplattform-APIs nutzt, mit denen Front-End-Entwickler bereits vertraut sind. Keine speziellen Scraping-Bibliotheken erforderlich!
Schauen wir uns die wichtigsten Schritte etwas genauer an.
Seiten abrufen
Der erste Schritt besteht darin, den HTML-Code der Seite herunterzuladen, die wir scrapen möchten. Die moderne Möglichkeit, HTTP-Anfragen aus JavaScript zu stellen, ist mit Fetch API.
Wir verwenden fetch() So laden Sie den HTML-Code einer beliebigen öffentlichen URL herunter:
fetch(‘https://example.com‘)
.then(response => response.text())
.then(html => {
// now we have the HTML of the page in the html variable
});Das fetch() Die Methode gibt ein Versprechen zurück, das in ein Response-Objekt aufgelöst wird, das die Antwortdaten enthält. Berufung .text() Die Antwort gibt ein Versprechen zurück, das mit dem Inhalt als Text aufgelöst wird.
Wir bieten einen Rückruf an .then() um unsere Scraping-Logik auszuführen, wann immer der HTML-Code bereit ist.
HTML parsen
Sobald wir den HTML-Code haben, besteht der nächste Schritt darin, ihn zu analysieren, um die gewünschten Daten zu extrahieren. Die beste API zum programmgesteuerten Analysieren von HTML-Dokumenten im Browser ist die DOM-API.
Wir können eine HTML-Zeichenfolge mithilfe von in ein Dokument analysieren DOMParser Klasse:
const parser = new DOMParser();
const doc = parser.parseFromString(html, ‘text/html‘);Dieser doc Die Variable enthält jetzt ein Dokumentobjekt, das den analysierten HTML-Code darstellt.
Wir können DOM-Methoden wie verwenden querySelector() So analysieren und extrahieren Sie Daten aus dem Dokument:
// 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‘);Die DOM-API ist recht umfangreich und ermöglicht es Ihnen, programmgesteuert zu simulieren, wie ein Mensch eine Webseite im Browser analysiert.
See dem Leitfaden Weitere Informationen zur Verwendung der DOM-API zum Parsen und Durchlaufen von HTML-Dokumenten.
Speichern von Scraped-Daten
Sobald wir die gewünschten Daten von der Seite extrahiert haben, besteht der nächste Schritt darin, sie irgendwo zu speichern. Zu den einfachen Optionen gehören:
- Anmelden an der Konsole – gut zum Debuggen
- Speichern in einer JavaScript-Variablen oder Datenstruktur
- Einlagern lokaler Speicher – bleibt sitzungsübergreifend bestehen
- Senden an einen Server über AJAX – z. B. um Scraped-Daten in einer Datenbank zu speichern
Beispielsweise:
// 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)
});Das sind also einige gängige Muster für die clientseitige Beibehaltung der Scraped-Daten.
Scraping mehrerer Seiten
Um mehrere Seiten zu scrapen, packen wir unsere Scraping-Logik in eine Funktion, die wir iterativ aufrufen können:
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));Wir können jede Seite nacheinander durchlaufen und durchsuchen oder verwenden Promise.all() um mehrere Seiten gleichzeitig zu durchsuchen.
Dadurch können wir ganze Websites programmgesteuert durchsuchen!
Kopflos für mehr Skalierbarkeit
Die bisherigen Beispiele führen die Scraping-Logik direkt im Browser aus. Für mehr Skalierung und Laufzeitkontrolle können wir unseren JavaScript-Scraper mit einem Tool wie „Headless“ in einer Browserumgebung ausführen Puppenspieler.
Puppeteer bietet eine Node.js-API zur programmgesteuerten Steuerung von Chrome (oder Chromium) über das DevTools-Protokoll. Dadurch können wir Scraping-Skripte auf einem Server ausführen und gleichzeitig die neueste Browser-Rendering-Engine nutzen.
Hier ist ein Beispiel für ein Puppeteer-Skript:
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();
})();Da Puppeteer die Browserumgebung verwaltet, können wir unsere clientseitigen Scraper skalieren und auf Servern in der Cloud ausführen.
Es gibt auch Dienste wie Apify und Dramatiker Cloud die gehostete Umgebungen bereitstellen, die für die Ausführung umfangreicher Scraping-Jobs optimiert sind.
Häufige Fallstricke
Hier sind einige häufige Herausforderungen, auf die Sie beim Scraping von Seiten mit Vanilla JS achten sollten:
Gleiche Herkunftspolitik – Auf Antwortdaten für Seiten in verschiedenen Domänen kann nicht zugegriffen werden. Proxys oder Dienste wie Apify können helfen.
Asynchrone Ausführung – Die Ausführung von JavaScript erfolgt asynchron, daher müssen Sie die Scraping-Schritte richtig anordnen.
Dynamischer Seiteninhalt – Über JavaScript geladene Inhalte sind beim ersten Laden der Seite möglicherweise nicht vorhanden. Möglicherweise muss auf Ereignisse wie gewartet werden
DOMContentLoaded.Browserunterschiede – Skripte können von Browser zu Browser unterschiedlich ausgeführt werden. Es wird empfohlen, mehrere Browser zu testen.
Schaber erkennen – Websites versuchen möglicherweise, Scraper mit Methoden wie Browser-Fingerprinting zu erkennen und zu blockieren. Rotierende Proxys/Benutzeragenten können hilfreich sein.
Standards zum Ausschluss von Robotern – Scraper sollten Standards wie robots.txt respektieren. Browsererweiterungen wie RobotJS können helfen.
Das sind also einige Dinge, die Sie beachten sollten. Insgesamt bietet Vanilla JavaScript jedoch eine sehr nützliche und leicht zugängliche Möglichkeit, mit dem Scrapen des Webs zu beginnen!
Scraping-Ethik
Es ist wichtig zu beachten, dass das Web Scraping an sich zwar im Allgemeinen legal ist, das, was Sie mit den gescrapten Daten tun, jedoch möglicherweise nicht legal ist.
Achten Sie darauf, ethisch und verantwortungsbewusst zu kratzen. Vermeiden Sie eine übermäßige Auslastung der Websites, respektieren Sie robots.txt und etwaige UI-Einschränkungen und verstoßen Sie nicht gegen die Nutzungsbedingungen der Websites.
Sammeln Sie nur Daten, die öffentlich zugänglich sind, und geben Sie niemals private Daten von gecrackten Websites weiter. Verwenden Sie die abgekratzten Daten nur für persönliche oder Forschungszwecke, nicht für kommerzielle Zwecke.
Die Einhaltung dieser ethischen Grundsätze trägt dazu bei, die Langlebigkeit des Web Scraping als nützliche Technik sicherzustellen.
Zusammenfassung
Hier sind einige wichtige Punkte, die wir zum Web Scraping mit clientseitigem JavaScript behandelt haben:
Beim Web Scraping handelt es sich um das programmgesteuerte Extrahieren von Daten von Websites.
Vanilla JavaScript bietet eine leicht zugängliche Möglichkeit, mit dem Scraping mithilfe von Standard-Browser-APIs zu beginnen.
Die Fetch-API kann Seiten-HTML abrufen und die DOM-API analysiert und extrahiert Daten.
Das Speichern, Transformieren und Iterieren ermöglicht das Scrapen von Websites in großem Maßstab.
Headless-Browser wie Puppeteer bieten mehr Leistung und Kontrolle.
Beim Web Scraping ist es wichtig, ethische Grundsätze zu befolgen.
Die Nutzung Ihrer vorhandenen Vanilla JS-Kenntnisse ist also eine schnelle Möglichkeit, mit der Extraktion nützlicher Daten aus Webseiten zu beginnen. Der Himmel ist die Grenze, wenn Sie die grundlegenden Techniken verstanden haben!
Viel Spaß beim (ethischen) Schaben!
