Wie man JavaScript-Webseiten effizient scrapt

Einleitung

Web Scraping hat sich zu einer wichtigen Technologie entwickelt. Durch die automatische Extraktion nützlicher Informationen aus Webseiten bietet es Unternehmen, Forschern und Entwicklern eine wichtige Datenquelle, um Wettbewerbsvorteile und Erkenntnisse zu gewinnen. Da sich die Webtechnologien jedoch ständig weiterentwickeln, verwenden immer mehr Websites anspruchsvolles JavaScript für das dynamische Laden von Inhalten und die Interaktion, was die Datenextraktion vor neue Herausforderungen stellt.

Die größte Herausforderung bei JavaScript-basierten Webseiten besteht darin, dass ihr Inhalt oft nicht direkt in HTML eingebettet ist, sondern vor der Anzeige über JavaScript-Skripte auf der Client-Seite geladen wird. Dies bedeutet, dass herkömmliche statische HTML-Parser nicht in der Lage sind, diese dynamischen Inhalte effizient zu verarbeiten. Darüber hinaus führt die weit verbreitete Verwendung von JavaScript-Frameworks (z. B. React, Vue, Angular usw.) und Single-Page-Anwendungen (SPAs) dazu, dass der Seiteninhalt beim ersten Laden leer ist und die tatsächlichen Daten erst durch Benutzerinteraktion oder asynchrone Anfragen abgerufen werden können.

Angesichts dieser technischen Hindernisse ist es daher notwendig, spezialisierte Web-Scraping-Tools wie Octoparse, Puppeteer, Selenium usw. zu verwenden, die in der Lage sind, das komplette Browserverhalten zu simulieren, JavaScript-generierte Inhalte zu laden und zu parsen. Dies erhöht nicht nur den Schwierigkeitsgrad und die Komplexität der Datenerfassung, sondern erfordert auch ein höheres Maß an technischem Wissen und Ressourcen, um asynchrone Operationen und dynamische Datenpräsentation zu bewältigen.

Sicherlich haben die meisten von Ihnen schon einmal den Begriff “Web Scraping” gehört. Doch wissen Sie wirklich, was Web Scraping bedeutet? Es gibt tatsächlich verschiedene Arten von Webseiten, weshalb unterschiedliche Methoden erforderlich sind, um Daten von ihnen zu extrahieren. In diesem Text werde ich das Data Scraping von JavaScript-Webseiten vorstellen.

Warum sind JS Webseiten unterschiedlich für Web Scraping?

Wir alle scrapen Webseiten. Der HTML-Inhalt, der als Antwort zurückgegeben wird, enthält unsere gewünschte Daten, und wir extrahieren sie, um bestimmte Ergebnisse zu erhalten.

Wenn eine Webseite eine JavaScript-Implementierung hat, werden die Originaldaten nach dem Rendering-Prozess erhalten. Wenn wir in dieser Situation ein normales Anfragepaket verwenden, enthalten die Antworten, die zurückgegeben werden, keine Daten.

JavaScript ist eine der drei Computersprachen, die alle Webprogrammierer lernen sollten. Mit HTML wird der Inhalt von Webseiten definiert, mit CSS wird das Layout von Webseiten festgelegt, und mit JavaScript wird das Verhalten von Webseiten programmiert.

JavaScript (JS) ist eine dynamische Computerprogrammiersprache. Sie wird am häufigsten als Teil von Webbrowsern verwendet, deren Implementierungen es clientseitigen Skripten ermöglichen, mit dem Benutzer zu interagieren, den Browser zu steuern, asynchron zu kommunizieren und den angezeigten Dokumentinhalt zu ändern. Sie wird auch für die serverseitige Programmierung, die Entwicklung von Spielen und die Erstellung von Desktop- und mobilen Anwendungen verwendet.

Zusammenfassend spielt JS in Web Scraping eine wichtige Rolle. Mit JS kann man den ganzen Prozess von Data Scraping vereinfachen.

Warum JavaScript für das Web Crawling wählen?

Um Ihnen zu helfen, die richtige Wahl zu treffen, haben wir mehrere Situationen skizziert, in denen die Wahl von JavaScript gegenüber Python eine bessere Idee sein könnte:

Client-seitiges Rendering (dynamische Inhalte): Viele moderne Websites verwenden JavaScript-Frameworks (z. B. React, Vue), um Inhalte dynamisch auf der Client-Seite darzustellen. Das Scraping solcher Websites ist mit JavaScript einfacher, da es direkt mit der gleichen Umgebung interagieren kann.
Browser-Automatisierung: Tools wie Puppeteer bieten hervorragende Browser-Automatisierungsfunktionen, mit denen Sie Inhalte scrapen können, die eine Interaktion erfordern (Klicks, Scrollen usw.).
Integration in Webprojekte: Wenn Sie bereits an einem JavaScript-basierten Webprojekt arbeiten, kann die Verwendung von JavaScript Ihre Arbeitsabläufe rationalisieren und den Wechsel zwischen verschiedenen Sprachen reduzieren.
Wenn Ihr Projekt jedoch umfangreiche Datenanalysen oder maschinelles Lernen nach dem Scraping beinhaltet, ist Python besser geeignet. Weitere Einzelheiten finden Sie hier: Web Scraping mit Python: Eine Schritt-für-Schritt-Anleitung.

Drei Möglichkeiten zur Verwendung von JavaScript beim Web Crawling

Statische Websites: Cheerio und Axios

Lassen Sie uns ein Beispiel für das Crawlen einer statischen E-Commerce-Website mit JavaScript durchgehen. Für dieses Beispiel werden wir zwei beliebte Bibliotheken verwenden: Axios zum Senden von HTTP-Anfragen und Cheerio zum Parsen des HTML.

1. Abhängigkeiten installieren
Zuerst müssen Sie Axios und Cheerio installieren. Wenn Sie das noch nicht getan haben, können Sie sie mit npm (Node Package Manager) installieren:

npm install axios cheerio

2. Erstellen Sie ein Skript

Erstellen Sie eine JavaScript-Datei, z. B. scrapeEcommerce.js, und öffnen Sie sie in Ihrem bevorzugten Code-Editor.

3. Erforderliche Module importieren
Importieren Sie in Ihrem Skript Axios und Cheerio:

const axios = require('axios');
const cheerio = require('cheerio');

4. Definieren Sie die Ziel-URL
Wählen Sie die E-Commerce-Website, die Sie abrufen möchten. Für dieses Beispiel verwenden wir eine hypothetische E-Commerce-Website http://example-ecommerce.com. Ersetzen Sie diese durch die tatsächliche URL, die Sie abrufen möchten.

const url = 'http://example-ecommerce.com';

5. Holen Sie den HTML-Inhalt
Verwenden Sie Axios, um eine GET-Anfrage an die Ziel-URL zu senden und den HTML-Inhalt abzurufen.

axios.get(url)
  .then(response => {
    const html = response.data;
    // Now we can parse the HTML content
  })
  .catch(error => {
    console.error('Error fetching the page:', error);
  });

6. Parsen des HTML und Extrahieren von Daten
Verwenden Sie Cheerio, um den HTML-Code zu analysieren und die gewünschten Informationen zu extrahieren. Nehmen wir an, wir wollen Produktnamen und Preise auslesen.

axios.get(url)
  .then(response => {
    const html = response.data;
    const $ = cheerio.load(html);

    const products = [];

    // Assuming each product is inside an element with the class 'product'
    $('.product').each((index, element) => {
      const name = $(element).find('.product-name').text().trim();
      const price = $(element).find('.product-price').text().trim();
      
      products.push({ name, price });
    });

    console.log(products);
  })
  .catch(error => {
    console.error('Error fetching the page:', error);
  });

Erklärung der wichtigsten Punkte

axios.get(url): Sendet eine GET-Anfrage an die Ziel-URL und gibt ein Versprechen zurück.
.then(response => { … }): Wenn die Anfrage erfolgreich ist, ist der HTML-Inhalt der Seite in response.data verfügbar.
cheerio.load(html): Lädt den HTML-Inhalt in Cheerio, so dass wir eine jQuery-ähnliche Syntax verwenden können, um das DOM zu durchlaufen und zu manipulieren.
$(‘.product’).each((index, element) => { … }): Wählt alle Elemente mit der Klasse product aus und iteriert über sie. Für jedes Produkt-Element:
$(element).find(‘.product-name’).text().trim(): Findet das Element mit dem Produktnamen und extrahiert dessen Textinhalt.
$(element).find(‘.product-price’).text().trim(): Findet das Element mit dem Produktpreis und extrahiert seinen Textinhalt.
products.push({ name, price }): Fügt die extrahierten Produktinformationen in das Array products ein.
console.log(products): Protokolliert die extrahierten Produktinformationen auf der Konsole.

Vollständiges Beispielskript

Hier ist das vollständige Beispielskript:

const axios = require('axios');
const cheerio = require('cheerio');

const url = 'http://example-ecommerce.com';

axios.get(url)
  .then(response => {
    const html = response.data;
    const $ = cheerio.load(html);

    const products = [];

    $('.product').each((index, element) => {
      const name = $(element).find('.product-name').text().trim();
      const price = $(element).find('.product-price').text().trim();
      
      products.push({ name, price });
    });

    console.log(products);
  })
  .catch(error => {
    console.error('Error fetching the page:', error);
  });

Anpassen für Ihre Zielsite

Selektoren: Die Selektoren .product, .product-name und .product-price basieren auf der Struktur der hypothetischen E-Commerce-Website. Sie müssen die HTML-Struktur der tatsächlichen Website prüfen und diese Selektoren entsprechend anpassen.
Zusätzliche Daten: Wenn Sie weitere Daten auslesen möchten (z. B. Produktbilder, Links, Beschreibungen), suchen Sie die entsprechenden HTML-Elemente und extrahieren Sie deren Inhalt auf ähnliche Weise.

Dynamische Websites: Puppeteer

Dynamische Websites sind oft auf JavaScript angewiesen, um Inhalte zu laden, was bedeutet, dass der Inhalt nicht sofort in der ersten HTML-Antwort verfügbar ist. Mit Puppeteer können wir mit Webseiten auf eine Weise interagieren, die echte Benutzerinteraktionen nachahmt. Als eine von Google entwickelte Node.js-Bibliothek bietet Puppeteer eine High-Level-API zur Steuerung von Chrome- oder Chromium-Browsern und kann diese dynamischen Seiten effektiv handhaben.

Um dies zu tun, müssen Sie zuerst:

1. Puppeteer importieren
Importieren Sie in Ihrer JavaScript-Datei Puppeteer:

const puppeteer = require('puppeteer');

2. Einen Browser starten und eine Seite öffnen

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
})();

3. Navigieren Sie zur Ziel-URL
Navigieren Sie zu der Website, die Sie abrufen möchten. Nehmen wir zum Beispiel an, wir möchten eine dynamisch geladene Produktliste von http://example-dynamic-ecommerce.com abrufen:

await page.goto('http://example-dynamic-ecommerce.com', { waitUntil: 'networkidle2' });

Die Option { waitUntil: ‘networkidle2’ } sorgt dafür, dass die Seite als vollständig geladen gilt, wenn für mindestens 500 ms nicht mehr als zwei Netzverbindungen bestehen.

4. Warten auf das Laden von Inhalten
Wenn der Inhalt dynamisch über JavaScript geladen wird, müssen Sie möglicherweise warten, bis bestimmte Elemente auf der Seite erscheinen:

await page.waitForSelector('.product');

5. Daten extrahieren
Verwenden Sie die Methode page.evaluate() von Puppeteer, um Code im Kontext der Seite auszuführen und die gewünschten Daten zu extrahieren:

const products = await page.evaluate(() => {
  const items = document.querySelectorAll('.product');
  const productData = [];

  items.forEach(item => {
    const name = item.querySelector('.product-name').innerText;
    const price = item.querySelector('.product-price').innerText;

    productData.push({ name, price });
  });

  return productData;
});

console.log(products);

6. Schließen Sie den Browser
Schließen Sie nach dem Extrahieren der Daten den Browser:

await browser.close();

7. Vollständiges Beispielskript

Hier finden Sie das vollständige Beispielskript für das Scraping einer dynamischen Website mit Puppeteer:

const puppeteer = require('puppeteer');

(async () => {
  // Launch a new browser instance
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // Navigate to the target URL
  await page.goto('http://example-dynamic-ecommerce.com', { waitUntil: 'networkidle2' });

  // Wait for the required content to load
  await page.waitForSelector('.product');

  // Extract data from the page
  const products = await page.evaluate(() => {
    const items = document.querySelectorAll('.product');
    const productData = [];

    items.forEach(item => {
      const name = item.querySelector('.product-name').innerText;
      const price = item.querySelector('.product-price').innerText;

      productData.push({ name, price });
    });

    return productData;
  });

  // Log the extracted data
  console.log(products);

  // Close the browser
  await browser.close();
})();

Zusätzliche Funktionen und Tipps

Handhabung der Paginierung: Wenn die Website mehrere Seiten hat, können Sie das Anklicken von Paginierungslinks automatisieren und die Daten von jeder Seite abrufen.
Erstellen von Screenshots: Verwenden Sie page.screenshot(), um Screenshots der Seite zu erstellen, die für die Fehlersuche nützlich sind.

await page.screenshot({ path: 'example.png' });

Interaktion mit Formularen: Mit page.type() und page.click() können Sie Formulare ausfüllen und abschicken.

await page.type('#search-box', 'query');
await page.click('#search-button');

Warten auf AJAX-Anfragen: Verwenden Sie page.waitForResponse(), um auf den Abschluss bestimmter Netzwerkanfragen zu warten.

await page.waitForResponse(response => response.url().includes('searchResults') && response.status() === 200);

Headless oder Headful ausführen: Puppeteer läuft standardmäßig im Headless-Modus (keine Benutzeroberfläche). Zum Debuggen können Sie ihn im Headful-Modus ausführen, indem Sie { headless: false } an puppeteer.launch() übergeben.

const browser = await puppeteer.launch({ headless: false });

Arbeiten in der Browser-Umgebung: jQuery

Das Scraping von Daten aus Websites kann manchmal direkt in der Browserumgebung mit jQuery durchgeführt werden. Diese Methode kann besonders nützlich sein, wenn Sie schnell Daten aus einer Webseite extrahieren müssen, die Sie gerade betrachten.

Was ist jQuery?

jQuery ist eine schnelle, kleine und funktionsreiche JavaScript-Bibliothek. Sie vereinfacht Dinge wie das Durchlaufen und Bearbeiten von HTML-Dokumenten, die Behandlung von Ereignissen und Animationen mit einer benutzerfreundlichen API, die mit einer Vielzahl von Browsern funktioniert. Für Scraping-Zwecke bietet jQuery leistungsstarke Tools zur Auswahl und Bearbeitung von HTML-Elementen.

Warum jQuery im Browser verwenden?

Schnelles Prototyping: Schnelles Testen und Extrahieren von Daten direkt aus der Browserkonsole, ohne eine vollständige Scraping-Umgebung einrichten zu müssen.
Interaktion in Echtzeit: Interagieren Sie direkt mit dem DOM und sehen Sie die Ergebnisse sofort.
Keine zusätzliche Einrichtung: Sie müssen keine zusätzlichen Bibliotheken installieren oder eine Backend-Umgebung einrichten.

Schritt-für-Schritt-Tutorial:

Hier finden Sie eine ausführliche Anleitung zur Verwendung von jQuery für Web Scraping in der Browserumgebung.

1. Öffnen Sie die Browser-Konsole

Öffnen Sie Ihren Webbrowser.
Navigieren Sie zu der Website, die Sie scrapen möchten.
Öffnen Sie die Browserkonsole (in der Regel durch Drücken von F12 oder Strg+Umschalt+I erreichbar).

2. jQuery laden
Wenn die Website nicht bereits jQuery enthält, können Sie es manuell laden, indem Sie den folgenden Code in die Konsole einfügen:

var script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.6.0.min.js';
document.head.appendChild(script);

Warten Sie ein paar Sekunden, bis das Skript geladen ist.

3. Scrapen von Daten mit jQuery
Sobald jQuery geladen ist, können Sie es verwenden, um Daten aus der Webseite auszuwählen und zu extrahieren. Das folgende Beispiel zeigt, wie Sie Produktnamen und Preise von einer hypothetischen E-Commerce-Website abrufen:

Identifizieren Sie die HTML-Struktur: Untersuchen Sie die Elemente, die Sie auslesen möchten, mit den Entwicklertools des Browsers. Nehmen wir an, die Produkte befinden sich in Elementen mit der Klasse product und jedes Produkt hat eine Klasse product-name und product-price.
Schreiben Sie jQuery-Code: Verwenden Sie jQuery-Selektoren und -Methoden, um die Daten zu extrahieren.

let products = [];

$('.product').each(function() {
  let name = $(this).find('.product-name').text().trim();
  let price = $(this).find('.product-price').text().trim();

  products.push({ name: name, price: price });
});

console.log(products);

Skript Erläuterung

$(‘.product’).each(function() { … }): Selektiert alle Elemente mit der Klasse product und iteriert über sie.
$(this).find(‘.product-name’).text().trim(): Findet das untergeordnete Element mit der Klasse product-name, extrahiert dessen Textinhalt und schneidet alle umgebenden Leerzeichen ab.
$(this).find(‘.product-price’).text().trim(): Auf ähnliche Weise wird der Textinhalt des Elements „Produktpreis“ extrahiert und gekürzt.
products.push({ name: name, preis: preis }): Fügt den extrahierten Produktnamen und Preis zum Array products hinzu.
console.log(products): Protokolliert die extrahierten Daten auf der Konsole.

Vollständiger Beispielcode

Hier ist der vollständige Beispielcode, den Sie direkt in der Konsole Ihres Browsers ausführen können:

// Load jQuery if not already included
var script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.6.0.min.js';
document.head.appendChild(script);

// Wait a few seconds for jQuery to load, then run the scraping code
setTimeout(function() {
  let products = [];

  $('.product').each(function() {
    let name = $(this).find('.product-name').text().trim();
    let price = $(this).find('.product-price').text().trim();

    products.push({ name: name, price: price });
  });

  console.log(products);
}, 3000);

4. Erweiterte Tipps

Umgang mit Paginierung: Wenn die Website eine Paginierung verwendet, müssen Sie möglicherweise durch jede Seite navigieren und den Scraping-Prozess wiederholen. Dies kann manuell im Browser erfolgen oder mit einem Skript in einem Headless-Browser wie Puppeteer automatisiert werden.
Extrahieren von Attributen: Wenn Sie Attribute extrahieren müssen (z. B. href von Links, src von Bildern), verwenden Sie die Methode .attr().

let imageUrl = $(this).find('.product-image').attr('src');

Daten filtern: Verwenden Sie die jQuery-Methode .filter(), um die Auswahl der Elemente nach bestimmten Kriterien einzuschränken.

$('.product').filter(function() {
  return $(this).find('.product-price').text().trim().includes('$');
}).each(function() {
  // Extract data from filtered elements
});

Web Scraping Tool für Scraping der Webseiten mit Javascript

Wenn Sie neulich zu Python, Ruby oder einer anderen Programmiersprache greifen müssen, um Ihre Anforderungen an das Scrapen von Webseiten zu erfüllen, ist Octoparse ein gutes Tool zum Scraping der Webseiten mit JavaScript-Unterstützung.

Lassen wir ein konkretes Beispiel nennen. Wenn Sie schon eine Ziel-Webseite haben und dann Ihr Web Scraping starten möchten, möchten Sie wegen dem Lesen dieses Artikel zuerst es erkennen, ob diese Seite JS-scrape-sicher gesperrt ist. Weil wir gesagt haben, dass verschiedene Arten von Webseiten unterschiedliche Methoden verwenden. Genau, das besteht keinen Zweifel, aber hier brauchen wir es nicht. Es kann deswegen einige Zeit und einige erfolglose Versuche dauern, bis Sie den Verdacht haben, dass etwas nicht stimmt, zumal es am Ende des Scrape-Vorgangs keine wesentliche Ausgabe gibt. Wenn wir einfach mit Hilfe von Web Scraping Tool Daten scrapen, ist alles nicht schwierig.

Viele Web-Scraping-Tools ermöglichen es Ihnen, das Schreiben von Crawlern zu umgehen. Octoparse ist ein hervorragendes Tool für das Scraping von JavaScript-lastigen Webseiten und kann Daten von 99% der Webseiten extrahieren, einschließlich solcher mit Ajax. Es bietet auch Captcha-Lösungsdienste an. Sie können Octoparse kostenlos nutzen, und mit der automatischen Erkennungsfunktion sowie über 100 benutzerfreundliche Vorlagen lassen sich die meisten Webseiten effizient extrahieren. Zudem gibt es eine 14-tägige Testversion für alle neuen Benutzer.

https://www.octoparse.de/template/google-maps-scraper-store-details-by-keyword

Zusammenfassung

Webseiten mit JavaScript zu scrapen mag zunächst komplex erscheinen, doch mit den richtigen Tools und Techniken wird es zu einer effektiven Methode, um wertvolle Daten zu extrahieren. Octoparse bietet dabei eine benutzerfreundliche Lösung, die sowohl für Einsteiger als auch für erfahrene Nutzer geeignet ist. Nutzen Sie die Möglichkeiten des Web Scrapings, um tiefere Einblicke in die Online-Welt zu gewinnen und datengetriebene Entscheidungen zu treffen. Probieren Sie es noch heute aus und entdecken Sie, wie einfach es sein kann, Ihre Webdatenanalyse auf das nächste Level zu heben!

Wenn Sie Probleme bei der Datenextraktion haben, oder uns etwas Vorschlägen geben möchten, kontaktieren Sie bitte uns per E-Mail (support@octoparse.com). 💬

Autor*in: Das Octoparse Team ❤️