Datenparsing und Scraping mit JavaScript: Vom Anfänger zum Profi

Warum Daten mit JavaScript parsen, wenn es Python gibt?

Hallo, Freund! Wenn du diesen Text liest, kennst du dich wahrscheinlich bereits mit Python und seinen Bibliotheken wie BeautifulSoup oder Scrapy aus. Aber was ist, wenn du auf eine Aufgabe stößt, bei der Python versagt? Zum Beispiel musst du Daten von einer Website sammeln, die vollständig auf React oder Angular basiert. Alle Informationen werden über JavaScript geladen, und im ursprünglichen HTML ist nichts. Hier kommt JavaScript ins Spiel!

Datenparsing und Scraping mit JavaScript ist nicht nur ein modischer Trend, sondern eine dringende Notwendigkeit für die Arbeit mit modernen Webanwendungen. Node.js ermöglicht es, die Browser-Engine direkt auf dem Server auszuführen, das DOM zu verarbeiten, auf Schaltflächen zu klicken und auf das Laden asynchroner Inhalte zu warten. In diesem Artikel werden wir echte Tools durchgehen und Code schreiben, den du sofort in deinen Projekten verwenden kannst.

Bereit, JavaScript in einen leistungsstarken Datenstaubsauger zu verwandeln? Los geht's!

Wichtige Werkzeuge für Scraping mit JavaScript

Bevor wir Code schreiben, lernen wir die wichtigsten "Kämpfer" in unserem Arsenal kennen. Für das Datenparsing mit JavaScript verwenden wir drei Säulen:

\n
• Axios – HTTP-Client zum Senden von Anfragen und Abrufen des HTML-Codes von Seiten.
\n
• Cheerio – eine schnelle und leichte Bibliothek zum Parsen von HTML, die wie jQuery auf dem Server funktioniert.
\n
• Puppeteer – ein vollwertiger Headless-Browser (Chrome), der JavaScript ausführen, klicken, scrollen und warten kann.
\n

Für statische Seiten reichen Axios + Cheerio aus. Wenn die Website Daten über AJAX lädt oder eine Autorisierung erfordert, nimm Puppeteer. Und jetzt gehen wir zur Praxis über.

Beispiel 1: Einfaches Parsen einer statischen Seite mit Cheerio

Angenommen, wir müssen die Nachrichtenüberschriften von einer Website sammeln, die HTML sofort ausliefert (ohne Dynamik). Installieren wir die Abhängigkeiten:

npm install axios cheerio

Jetzt schreiben wir ein Skript, das alle h2-Überschriften von der Startseite extrahiert (ersetze die URL durch eine echte):

const axios = require('axios');\nconst cheerio = require('cheerio');\n\nasync function parseStaticPage(url) {\n    try {\n        const { data } = await axios.get(url);\n        const $ = cheerio.load(data);\n\n        const titles = [];\n        $('h2').each((i, el) => {\n            titles.push($(el).text().trim());\n        });\n\n        console.log('Gefundene Überschriften:');\n        titles.forEach((title, index) => {\n            console.log(`${index + 1}. ${title}`);\n        });\n    } catch (error) {\n        console.error('Parsing-Fehler:', error.message);\n    }\n}\n\nparseStaticPage('https://example.com/news');

Dieser Code ist die Basis, mit der du das Studium des Daten-Scrapings mit JavaScript beginnen solltest. Cheerio arbeitet blitzschnell, kann aber keine Skripte ausführen. Wenn die Website "Laden..." anzeigt, lies weiter.

Beispiel 2: Parsen dynamischer Seiten mit Puppeteer

Stellen wir uns nun vor, dass Daten erst erscheinen, nachdem der Benutzer die Seite gescrollt oder auf die Schaltfläche "Mehr anzeigen" geklickt hat. Für solche Aufgaben ist Puppeteer ideal. Installieren wir es:

npm install puppeteer

Szenario: Wir gehen auf eine Seite mit Produkten, warten 3 Sekunden (bis JS geladen ist) und sammeln dann die Produktnamen:

const puppeteer = require('puppeteer');\n\nasync function parseDynamicPage(url) {\n    const browser = await puppeteer.launch({ headless: true });\n    const page = await browser.newPage();\n\n    await page.goto(url, { waitUntil: 'networkidle2' });\n    // Warten auf das Erscheinen des Inhalts (Selektor .product-title)\n    await page.waitForSelector('.product-title', { timeout: 10000 });\n\n    const items = await page.evaluate(() => {\n        const titles = [];\n        document.querySelectorAll('.product-title').forEach(el => {