JavaScript Web-Scraper erstellen: Schritt-für-Schritt-Anleitung

Das Web quillt über vor Daten – und wenn du im Business- oder Tech-Bereich arbeitest oder einfach nur neugierig bist, hast du dir wahrscheinlich schon gewünscht, Informationen in großen Mengen von einer Website abzurufen, ohne den ganzen Nachmittag mit Kopieren und Einfügen zu verbringen. Und jetzt kommt der Hammer: Bis 2025 bestehen fast die Hälfte des gesamten Internetverkehrs aus Bots, die das Web nach Daten durchsuchen und scrapen, und über 70 % der digitalen Unternehmen verlassen sich für Marktinformationen und operative Abläufe auf öffentliche Webdaten (). Doch obwohl der Bedarf an Webdaten explodiert ist, kann das eigentliche Extrahieren ziemlich mühsam sein – vor allem bei heutigen dynamischen, von JavaScript gesteuerten Websites.

Genau hier kommt JavaScript ins Spiel. Als Sprache des Webs ist JavaScript wie gemacht für dynamische, interaktive Seiten, an denen klassische Scraper scheitern. Ob du als Entwickler Recherchen automatisieren willst, als Sales-Profi Lead-Listen aufbaust oder einfach gern experimentierst: Dieser Leitfaden zeigt dir alles Wichtige zum Aufbau eines JavaScript-Web-Scrapers – von den Grundlagen bis zu fortgeschrittenen Techniken, und sogar, wie du den Code komplett umgehst mit KI-Tools wie .

JavaScript-Scraper-Grundlagen: Was ist Web Scraping mit JavaScript?

Fangen wir mit den Grundlagen an. Web Scraping ist der Prozess, bei dem automatisch Informationen von Websites extrahiert werden. Stell dir einen superschnellen Assistenten vor, der Hunderte von Seiten besucht, die benötigten Daten kopiert und sie in einer sauberen Tabelle organisiert – ohne je über Karpaltunnelsyndrom zu klagen.

Ein JavaScript-Scraper ist einfach ein Web-Scraper, der mit JavaScript gebaut wurde. JavaScript-Scraper lassen sich auf zwei Hauptarten ausführen:

• Im Browser: Skripte direkt in der Browser-Konsole ausführen oder Browser-Erweiterungen nutzen, um Daten von der gerade geöffneten Seite abzurufen.
• Serverseitig (Node.js): JavaScript außerhalb des Browsers verwenden (dank Node.js), um Webseiten abzurufen, ihren Inhalt zu parsen und Daten programmgesteuert zu extrahieren.

Warum ist das für Business-Nutzer wichtig? Weil Web Scraping alles antreibt – von Lead-Generierung (Kontakte aus Verzeichnissen ziehen) über Preis-Monitoring (Wettbewerber im Blick behalten) bis hin zu Marktforschung (Bewertungen, News oder Trends sammeln). Tatsächlich arbeiten allein 48 % der Web-Scraping-Nutzer im E-Commerce (). Wenn du es im Browser sehen kannst, kann ein JavaScript-Scraper es dir wahrscheinlich auch holen.

Warum Web Scraping mit JavaScript? Die wichtigsten Vorteile für moderne Websites

Warum also JavaScript zum Scrapen verwenden, gerade wenn Python in der Data-Science-Welt so viel Liebe bekommt? Das Geheimnis ist: Moderne Websites werden von JavaScript angetrieben. Sie laden Inhalte dynamisch, rufen Daten erst nach dem Laden der Seite ab und verlangen oft Nutzerinteraktionen wie „Mehr laden“ klicken oder scrollen. JavaScript-Scraper können:

• Dynamische Inhalte verarbeiten: Da JavaScript die Sprache ist, die in deinem Browser läuft, kann es Inhalte sehen und mit ihnen interagieren, die erst nach dem Ausführen von Skripten erscheinen.
• Echtes Nutzerverhalten nachahmen: Tools wie Puppeteer ermöglichen es, Klicks, Scrollen und sogar Logins zu automatisieren – genau wie ein Mensch.
• Nativ mit dem DOM arbeiten: JavaScript kann direkt auf die Struktur der Seite zugreifen und sie manipulieren, was das Extrahieren der genau benötigten Daten erleichtert.

Wie schlägt sich JavaScript im Vergleich zu anderen Sprachen? Hier ein kurzer Überblick:

Wenn deine Zielseite eine Single-Page-App ist oder Daten erst beim Scrollen oder Klicken lädt, ist JavaScript oft das beste Werkzeug dafür ().

Dein erstes JavaScript-Scraper-Setup: Tools und Umgebung

Bereit, selbst loszulegen? So richtest du eine einfache JavaScript-Scraping-Umgebung ein – ganz ohne Frameworks.

1. Node.js installieren
   Lade Node.js von herunter und installiere es. Damit kannst du JavaScript außerhalb des Browsers ausführen.

2. Projekt initialisieren
   Öffne dein Terminal und führe aus:

   1mkdir my-scraper
   2cd my-scraper
   3npm init -y

3. Wichtige Bibliotheken installieren
   Nützlich sind:

   • oder node-fetch für HTTP-Anfragen
   • zum Parsen von HTML (denk daran wie an jQuery für den Server)

   1npm install axios cheerio

4. Zielwebsite untersuchen
   Öffne die Chrome DevTools (Rechtsklick > Untersuchen) und suche nach den HTML-Elementen, die deine Daten enthalten. Notiere dir ihre Klassen, IDs oder Tags.

Hier ist ein einfaches Starter-Skript:

1const axios = require('axios');
2const cheerio = require('cheerio');
3async function scrapePage(url) {
4  try {
5    const { data: html } = await axios.get(url);
6    const $ = cheerio.load(html);
7    const pageTitle = $('head > title').text();
8    console.log("Seitentitel:", pageTitle);
9  } catch (err) {
10    console.error("Scraping fehlgeschlagen:", err);
11  }
12}
13scrapePage('https://example.com');

Starte es mit node scrape.js, und du siehst den Seitentitel ausgegeben. Nicht schlecht für ein paar Zeilen Code!

Einen einfachen JavaScript-Web-Scraper bauen: Schritt-für-Schritt-Anleitung

Lass uns etwas Nützlicheres bauen. Angenommen, du möchtest Buchtitel und Preise von scrapen – einer klassischen Übungsseite.

Schritt 1: Die Seite untersuchen

Jedes Buch steckt in einem <article class="product_pod">. Der Titel steht in <h3><a title="Book Title"></a></h3>, und der Preis in <p class="price_color">.

Schritt 2: Den Scraper schreiben

1const axios = require('axios');
2const cheerio = require('cheerio');
3async function scrapeBooks() {
4  const url = 'http://books.toscrape.com/';
5  const { data: html } = await axios.get(url);
6  const $ = cheerio.load(html);
7  const books = [];
8  $('article.product_pod').each((i, elem) => {
9    const title = $(elem).find('h3 a').attr('title');
10    const price = $(elem).find('.price_color').text();
11    books.push({ title, price });
12  });
13  console.log(books);
14}
15scrapeBooks();

Dieses Skript ruft die Seite ab, parst das HTML, läuft durch jedes Buch und extrahiert Titel und Preis. Die Ausgabe? Ein ordentliches Array von Buchobjekten:

1[
2  { "title": "A Light in the Attic", "price": "£51.77" },
3  { "title": "Tipping the Velvet", "price": "£53.74" }
4]

Schritt 3: Für Paginierung erweitern

Willst du mehrere Seiten scrapen? Suche nach dem „Weiter“-Link und gehe die Seiten in einer Schleife durch, wobei du die URL jedes Mal aktualisierst. Mit etwas mehr Code kannst du die ganze Website scrapen.

Einen Schritt weitergehen: Dynamische Inhalte und Nutzerinteraktionen mit JavaScript verarbeiten

Jetzt kommt der spannende (und manchmal frustrierende) Teil: dynamische Inhalte. Viele moderne Websites zeigen nicht alle Daten direkt im anfänglichen HTML. Stattdessen laden sie sie nach dem Seitenaufruf per JavaScript oder verlangen Klicks bzw. Scrollen, um mehr zu sehen.

Cheerio und Axios sehen diese Inhalte nicht – sie bekommen nur das rohe HTML. Um dynamische Websites zu scrapen, brauchst du einen Headless Browser wie .

Puppeteer für fortgeschrittenes JavaScript-Web-Crawling nutzen

Mit Puppeteer kannst du Chrome (oder Chromium) per Code steuern. Du kannst:

• Seiten öffnen
• Auf das Laden von Elementen warten
• Buttons klicken, Formulare ausfüllen, scrollen
• Inhalte extrahieren, nachdem alle Skripte gelaufen sind

Hier ist ein einfaches Puppeteer-Skript:

1const puppeteer = require('puppeteer');
2(async () => {
3  const browser = await puppeteer.launch();
4  const page = await browser.newPage();
5  await page.goto('https://example.com', { waitUntil: 'networkidle0' });
6  await page.waitForSelector('.dynamic-content');
7  const data = await page.evaluate(() => {
8    return Array.from(document.querySelectorAll('.dynamic-content'))
9      .map(el => el.textContent.trim());
10  });
11  console.log(data);
12  await browser.close();
13})();

Du kannst sogar Logins automatisieren, auf „Mehr laden“-Buttons klicken oder endloses Scrollen abarbeiten, indem du die Seite programmgesteuert scrollst und wartest, bis neuer Inhalt erscheint ().

Thunderbit: JavaScript-Scraping vereinfachen und verbessern

Seien wir ehrlich: Scraper von Grund auf zu schreiben ist mächtig, aber es kostet Zeit, technisches Know-how und laufende Wartung. Genau deshalb bin ich so ein Fan von , unserer KI-gestützten Chrome-Erweiterung, die Web Scraping zu einer Sache von zwei Klicks macht.

Thunderbit ist für Business-Nutzer gebaut – ganz ohne Programmieren. So funktioniert es:

• KI-Felder vorschlagen: Ein Klick, und die KI von Thunderbit scannt die Seite und schlägt die besten Spalten zum Extrahieren vor, etwa „Produktname“, „Preis“, „E-Mail“ usw.
• Scraping in 2 Klicks: Prüfe die vorgeschlagenen Felder, klicke auf „Scrapen“, und Thunderbit holt alle Daten – inklusive Paginierung und Unterseiten automatisch.
• Unterseiten- und Paginierungs-Unterstützung: Brauchst du mehr Details? Thunderbit kann Links zu Unterseiten folgen, etwa Produktdetails oder Profile, und diese Daten in deine Tabelle übernehmen.
• Cloud- oder Browser-Modus: Scrape im Browser (ideal für eingeloggte Seiten) oder nutze Thunderbits Cloud für mehr Geschwindigkeit (bis zu 50 Seiten gleichzeitig).
• Kostenloser, strukturierter Export: Exportiere deine Daten nach Excel, Google Sheets, Airtable, Notion, CSV oder JSON – immer kostenlos, ganz egal, wie viel du scrapest.

Thunderbit in Aktion: Von der Datenextraktion bis zum Export

Nehmen wir an, du möchtest Kontaktinformationen aus einem Firmenverzeichnis extrahieren:

1. Thunderbit installieren ().
2. Die Verzeichnisseite öffnen.
3. Auf „KI-Felder vorschlagen“ klicken. Die KI von Thunderbit schlägt Spalten wie „Name“, „Telefon“, „Firma“ vor.
4. Auf „Scrapen“ klicken. Thunderbit sammelt alle Daten, auch über mehrere Seiten hinweg.
5. Nach Sheets oder Excel exportieren. Fertig.

Was früher Stunden dauerte oder einen Entwickler erforderte, dauert jetzt Minuten. Und weil Thunderbit KI nutzt, ist es widerstandsfähig gegen Änderungen am Website-Layout – keine kaputten Skripte mehr, jedes Mal wenn eine Seite aktualisiert wird ().

So lässt sich traditionelles JavaScript-Scraping mit Thunderbit vergleichen:

Fortgeschrittene Techniken: Komplexes Web Scraping mit JavaScript-Bibliotheken

Manchmal musst du weiter gehen – Daten hinter Logins scrapen, endloses Scrollen verarbeiten oder Anti-Scraping-Schutz umgehen.

• Logins/Sessions: Mit Puppeteer kannst du das Einloggen automatisieren, indem du Formulare ausfüllst und Buttons klickst, und danach die Daten als authentifizierter Nutzer scrapen.
• Endloses Scrollen: Scrolle die Seite programmatisch, warte auf neuen Inhalt und wiederhole das, bis alle Daten geladen sind ().
• Anti-Scraping-Maßnahmen: Nutze Proxys, rotiere User-Agents und drossele deine Anfragen, um nicht blockiert zu werden. Über 95 % der Scraping-Fehler gehen auf Anti-Bot-Abwehr zurück ().

Profi-Tipp: Manchmal kannst du den Browser ganz umgehen, indem du die versteckten API-Endpunkte der Website findest (sieh im Network-Tab der DevTools nach). Wenn du JSON-Daten direkt abrufen kannst, wird dein Scraper deutlich schneller.

Deinen JavaScript-Web-Crawler optimieren und warten

Einen Scraper zu bauen ist nur die halbe Miete – ihn stabil am Laufen zu halten ist die andere Hälfte.

• Asynchrone Verarbeitung: Verwende async/await und rufe Seiten parallel ab, aber überlaste den Server nicht.
• Batch-Verarbeitung: Verarbeite Daten in Blöcken, um Speicherprobleme zu vermeiden.
• Fehlerbehandlung: Fange Fehler ab, wiederhole fehlgeschlagene Anfragen und protokolliere Probleme zum Debuggen.
• Paginierung: Erkenne „Weiter“-Links oder -Buttons und gehe die Seiten systematisch durch.
• Robuste Selektoren: Nutze eindeutige IDs oder Klassen; vermeide fragile Selektoren, die bei Layout-Änderungen brechen.
• Monitoring: Richte Warnmeldungen ein, falls dein Scraper plötzlich leere Daten oder Fehler liefert.

Best Practice: Scraping ist nie „einrichten und vergessen“. Plane regelmäßige Updates und Monitoring ein ().

JavaScript-Scraping-Lösungen vergleichen: Traditionell vs. Thunderbit

Hier ein kurzer Vergleich für Business-Nutzer:

Für die meisten Business-Nutzer ist Thunderbit der schnellste Weg von „Ich brauche diese Daten“ zu „Hier ist meine Tabelle“.

Fazit und wichtigste Erkenntnisse

Einen JavaScript-Web-Scraper zu bauen ist in der heutigen datengetriebenen Welt eine echte Superkraft. Das habe ich gelernt – und das empfehle ich:

• Einfach anfangen: Nutze Cheerio und Axios für statische Websites.
• Bei Bedarf fortgeschritten arbeiten: Nutze Puppeteer für dynamische, interaktive oder loginpflichtige Seiten.
• Mit KI-Tools Zeit sparen: Für die meisten Business-Anforderungen lässt dich den Code überspringen und liefert Ergebnisse in Minuten.
• Wartung einplanen: Websites ändern sich – deine Scraper sollten anpassungsfähig sein.
• Immer ethisch scrapen: Beachte die Nutzungsbedingungen, überlaste keine Server und verwende Daten verantwortungsvoll.

Wenn du neugierig bist und Scraping ohne Kopfschmerzen ausprobieren willst, und sieh selbst, wie einfach es sein kann. Und wenn du tiefer einsteigen willst, findest du im weitere Anleitungen, Tipps und Praxisbeispiele.

Viel Spaß beim Scrapen – und mögen deine Selektoren immer eindeutig sein!

FAQs

1. Was ist ein JavaScript-Web-Scraper?
Ein JavaScript-Web-Scraper ist ein Programm (oder Skript), das in JavaScript geschrieben wurde und automatisch Daten von Websites extrahiert. Es kann im Browser oder auf dem Server (mit Node.js) laufen und eignet sich besonders gut für dynamische, stark von JavaScript abhängige Seiten.

2. Warum sollte man für Web Scraping JavaScript statt Python wählen?
JavaScript ist die Sprache des Webs und daher ideal für das Scrapen von Seiten, die Inhalte dynamisch laden oder Nutzerinteraktionen erfordern. Python ist großartig für statische Seiten und Datenanalyse, braucht aber für dynamische Inhalte zusätzliche Tools.

3. Welche Tools brauche ich, um einen JavaScript-Scraper zu bauen?
Für statische Seiten: Node.js, Axios (oder fetch) und Cheerio. Für dynamische Seiten: Puppeteer oder Playwright für Headless-Browser-Automatisierung hinzufügen. Für No-Code-Scraping: ausprobieren.

4. Wie vereinfacht Thunderbit Web Scraping?
Thunderbit nutzt KI, um Daten von jeder Website automatisch zu erkennen und zu extrahieren. Einfach auf „KI-Felder vorschlagen“ und dann auf „Scrapen“ klicken und die Daten exportieren – ganz ohne Programmierung oder mühsames Hantieren mit Selektoren.

5. Ist Web Scraping legal und ethisch?
Web Scraping ist legal, wenn es verantwortungsvoll gemacht wird – nur öffentlich verfügbare Daten scrapen, die Nutzungsbedingungen beachten und Server nicht überlasten. Vermeide das Scrapen personenbezogener Daten ohne Einwilligung und nutze Daten immer ethisch.

Willst du JavaScript-Scraping in Aktion sehen? Schau auf Thunderbits für Tutorials vorbei oder entdecke mehr im .

Mehr erfahren