Erste Schritte mit Web Scraping in JavaScript

Web Scraping, auch bekannt als Datenerfassung aus dem Internet, ist ein faszinierendes Gebiet der Programmierung.

Was genau verbirgt sich hinter dem Begriff Web Scraping?

Und warum existiert diese Technik überhaupt?

Lassen Sie uns diese Fragen gemeinsam beantworten.

Was ist Web Scraping?

Web Scraping ist ein automatisierter Prozess, der dazu dient, Informationen von Webseiten zu extrahieren. Es handelt sich um eine Technik, mit der man Daten sammeln und in einer strukturierten Form speichern kann.

Die Anwendungsbereiche für Web Scraping sind vielfältig. Man kann beispielsweise Produktpreise vergleichen, tägliche Angebote aus dem Internet abrufen oder sogar eine eigene Suchmaschine entwickeln, ähnlich wie Google oder Yahoo. Die Möglichkeiten sind nahezu unbegrenzt.

Mit Web Scraping können Sie mehr erreichen, als Sie vielleicht denken. Wenn Sie erst einmal die Kunst der Datenerfassung von Webseiten beherrschen, stehen Ihnen viele Türen offen.

Das Programm, das für die Extraktion von Daten aus Webseiten zuständig ist, wird als Web Scraper bezeichnet. In diesem Artikel werden Sie lernen, wie Sie solche Web Scraper mit JavaScript entwickeln können.

Web Scraping besteht im Wesentlichen aus zwei Hauptteilen:

  • Der erste Schritt ist das Abrufen der Daten mit Hilfe von Bibliotheken wie ’node-fetch‘ oder einem Headless-Browser.
  • Der zweite Schritt ist die Analyse der Daten, um genau die Informationen zu extrahieren, die Sie benötigen.

Lassen Sie uns ohne weitere Verzögerung beginnen.

Projektstruktur

Für dieses Projekt wird vorausgesetzt, dass Node.js bereits auf Ihrem System installiert ist. Falls nicht, finden Sie eine Installationsanleitung für NodeJS im Netz.

Wir werden die Pakete `node-fetch` und `cheerio` für unser Web Scraping-Projekt in JavaScript verwenden. Um mit diesen Paketen von Drittanbietern arbeiten zu können, müssen wir das Projekt mit npm einrichten.

Hier sind die Schritte, die Sie ausführen müssen, um Ihr Setup abzuschließen:

  • Erstellen Sie ein neues Verzeichnis mit dem Namen `web_scraping` und navigieren Sie zu diesem.
  • Führen Sie den Befehl `npm init` aus, um das Projekt zu initialisieren.
  • Beantworten Sie die Fragen, die npm stellt, nach Ihren Wünschen.
  • Installieren Sie nun die Pakete mit folgendem Befehl:
npm install node-fetch cheerio

Betrachten wir die installierten Pakete im Detail:

Node Fetch

Das `node-fetch` Paket bringt die Funktion `window.fetch` in die Node.js-Umgebung. Es ermöglicht HTTP-Anfragen und die Abholung von Rohdaten.

Cheerio

Das Paket `cheerio` wird verwendet, um die Rohdaten zu analysieren und die gewünschten Informationen zu extrahieren.

Diese beiden Pakete, `node-fetch` und `cheerio`, sind ausreichend, um Web Scraping mit JavaScript durchzuführen. Wir werden nicht alle Methoden dieser Pakete untersuchen, sondern uns auf den Ablauf des Web Scrapings und die dabei nützlichsten Methoden konzentrieren.

Der beste Weg, Web Scraping zu lernen, ist es, es selbst auszuprobieren. Also legen wir los!

Scraping einer Cricket Weltmeisterschaftsliste

In diesem Abschnitt werden wir uns dem eigentlichen Web Scraping zuwenden.

Welche Daten werden wir extrahieren?

Der Titel dieses Abschnitts sollte es Ihnen leicht machen zu erraten. Richtig, wir werden alle Cricket-Weltmeister und Zweitplatzierten bis zum heutigen Tag extrahieren.

  • Erstellen Sie eine Datei mit dem Namen `extract_cricket_world_cups_list.js` in Ihrem Projektverzeichnis.
  • Wir werden die Wikipedia-Seite zur Cricket-Weltmeisterschaft verwenden, um die benötigten Informationen zu erhalten.
  • Zuerst holen wir uns die Rohdaten mit dem `node-fetch` Paket.
  • Der folgende Code ruft die Rohdaten der obigen Wikipedia-Seite ab.
const fetch = require("node-fetch");

// Funktion zum Abrufen der Rohdaten
const getRawData = (URL) => {
   return fetch(URL)
      .then((response) => response.text())
      .then((data) => {
         return data;
      });
};

// URL für die Daten
const URL = "https://en.wikipedia.org/wiki/Cricket_World_Cup";

// Start des Programms
const getCricketWorldCupsList = async () => {
   const cricketWorldCupRawData = await getRawData(URL);
   console.log(cricketWorldCupRawData);
};

// Aufruf der Hauptfunktion
getCricketWorldCupsList();

Wir haben die Rohdaten von der URL erhalten. Jetzt ist es an der Zeit, die benötigten Informationen aus diesen Rohdaten zu extrahieren. Dazu verwenden wir das `cheerio` Paket.

Das Extrahieren von Daten, die sich in HTML-Tags befinden, ist mit `cheerio` sehr einfach. Bevor wir uns mit den eigentlichen Daten befassen, sehen wir uns ein paar einfache Beispiele zur Datenanalyse mit `cheerio` an.

  • Analysieren Sie die HTML-Daten mit der Methode `cheerio.load`.
const parsedSampleData = cheerio.load(
      `<div id="container"><p id="title">Ich bin ein Titel</p></div>`
   );
  • Wir haben den obigen HTML-Code analysiert. Wie kann man nun den Inhalt des p-Tags extrahieren? Das funktioniert ähnlich wie bei der Selektion in der JavaScript-DOM-Manipulation.

console.log(parsedSampleData(„#title“).text());

Sie können die Tags nach Belieben auswählen. Es gibt verschiedene Methoden, die Sie auf der offiziellen Cheerio-Website ausprobieren können.

  • Jetzt ist es an der Zeit, die Liste der Weltmeisterschaften zu extrahieren. Um die Informationen zu extrahieren, müssen wir die HTML-Tags kennen, die die Daten auf der Seite enthalten. Gehen Sie zur Wikipedia-Seite zur Cricket-Weltmeisterschaft und überprüfen Sie die Seite auf die relevanten HTML-Tags.

Hier ist der vollständige Code:

const fetch = require("node-fetch");
const cheerio = require("cheerio");

// Funktion zum Abrufen der Rohdaten
const getRawData = (URL) => {
   return fetch(URL)
      .then((response) => response.text())
      .then((data) => {
         return data;
      });
};

// URL für die Daten
const URL = "https://en.wikipedia.org/wiki/Cricket_World_Cup";

// Start des Programms
const getCricketWorldCupsList = async () => {
   const cricketWorldCupRawData = await getRawData(URL);

   // Parsen der Daten
   const parsedCricketWorldCupData = cheerio.load(cricketWorldCupRawData);

   // Extrahieren der Tabellendaten
   const worldCupsDataTable = parsedCricketWorldCupData("table.wikitable")[0]
      .children[1].children;

   console.log("Jahr --- Gewinner --- Zweitplatzierter");
   worldCupsDataTable.forEach((row) => {
      // Extrahieren der `td` Tags
      if (row.name === "tr") {
         let year = null,
            winner = null,
            runner = null;

         const columns = row.children.filter((column) => column.name === "td");

         // Extrahieren des Jahres
         const yearColumn = columns[0];
         if (yearColumn) {
            year = yearColumn.children[0];
            if (year) {
               year = year.children[0].data;
            }
         }

         // Extrahieren des Gewinners
         const winnerColumn = columns[3];
         if (winnerColumn) {
            winner = winnerColumn.children[1];
            if (winner) {
               winner = winner.children[0].data;
            }
         }

         // Extrahieren des Zweitplatzierten
         const runnerColumn = columns[5];
         if (runnerColumn) {
            runner = runnerColumn.children[1];
            if (runner) {
               runner = runner.children[0].data;
            }
         }

         if (year && winner && runner) {
            console.log(`${year} --- ${winner} --- ${runner}`);
         }
      }
   });
};

// Aufruf der Hauptfunktion
getCricketWorldCupsList();

Und hier sind die extrahierten Daten:

Jahr --- Gewinner --- Zweitplatzierter
1975 --- West Indies --- Australia
1979 --- West Indies --- England
1983 --- India --- West Indies
1987 --- Australia --- England
1992 --- Pakistan --- England
1996 --- Sri Lanka --- Australia
1999 --- Australia --- Pakistan
2003 --- Australia --- India
2007 --- Australia --- Sri Lanka
2011 --- India --- Sri Lanka
2015 --- Australia --- New Zealand
2019 --- England --- New Zealand

Ziemlich cool, oder?

Scraping-Vorlage

Das Abrufen von Rohdaten von einer URL ist in fast jedem Web Scraping-Projekt notwendig. Der einzige Teil, der sich ändert, ist die Extraktion der Daten gemäß Ihren Anforderungen. Sie können den folgenden Code als Vorlage verwenden:

const fetch = require("node-fetch");
const cheerio = require("cheerio");
const fs = require("fs");
// Funktion zum Abrufen der Rohdaten
const getRawData = (URL) => {
   return fetch(URL)
      .then((response) => response.text())
      .then((data) => {
         return data;
      });
};
// URL für die Daten
const URL = "https://example.com/";
// Start des Programms
const scrapeData = async () => {
   const rawData = await getRawData(URL);
   // Parsen der Daten
   const parsedData = cheerio.load(rawData);
   console.log(parsedData);
   // Hier Code zum Extrahieren der Daten einfügen
   // ...
   // ...
};
// Aufruf der Hauptfunktion
scrapeData();

Fazit

Sie haben gelernt, wie man eine Webseite scrapt. Jetzt sind Sie an der Reihe, Ihre Programmierfähigkeiten zu üben.

Ich empfehle Ihnen auch, sich beliebte Web Scraping Frameworks und Cloud-basierte Web Scraping-Lösungen anzusehen.

Viel Spaß beim Programmieren 🙂

Hat Ihnen dieser Artikel gefallen? Dann teilen Sie ihn doch mit der Welt!