Erste Schritte mit Web Scraping in JavaScript

Web Scraping ist eines der interessantesten Dinge in der Programmierwelt.

Was ist Webscraping?

Warum ist es überhaupt vorhanden?

Finden wir die Antworten heraus.

Was ist Webscraping?

Web Scraping ist eine automatisierte Aufgabe, um Daten von Websites zu extrahieren.

Es gibt viele Anwendungen von Web Scraping. Extrahieren der Preise von Produkten und Vergleichen mit verschiedenen E-Commerce-Plattformen. Holen Sie sich ein tägliches Angebot aus dem Internet. Bauen Sie Ihre eigene Suchmaschine wie Google, Yahoo usw. auf. Die Liste geht weiter.

Mit Web Scraping können Sie mehr erreichen, als Sie denken. Sobald Sie wissen, wie Sie die Daten von Websites extrahieren, können Sie mit den Daten machen, was Sie wollen.

Das Programm, das die Daten von Websites extrahiert, wird als Web Scraper bezeichnet. Sie werden lernen, Web Scraper in JavaScript zu schreiben.

Das Web Scraping besteht hauptsächlich aus zwei Teilen.

  • Abrufen der Daten mithilfe von Anforderungsbibliotheken und einem Headless-Browser.
  • Analysieren der Daten, um genau die Informationen zu extrahieren, die wir aus den Daten wollen.

Lassen Sie uns ohne weiteres anfangen.

Projektaufbau

Ich gehe davon aus, dass Sie Node installiert haben, wenn nicht, sehen Sie sich die NodeJS-Installationsanleitung an.

Wir werden die Pakete node-fetch und cheerio für Web Scraping in JavaScript verwenden. Lassen Sie uns das Projekt mit npm so einrichten, dass es mit einem Paket eines Drittanbieters funktioniert.

Lassen Sie uns schnell die Schritte sehen, um unser Setup abzuschließen.

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

Lassen Sie uns einen Blick auf die installierten Pakete werfen.

  So verbergen Sie Favoriten auf der neuen Registerkarte von Safari auf iPhone und iPad

Knoten abrufen

Das Paket node-fetch bringt window.fetch in die node js-Umgebung. Es hilft, die HTTP-Anforderungen zu stellen und die Rohdaten zu erhalten.

heiter

Das Paket heiter wird verwendet, um die erforderlichen Informationen aus den Rohdaten zu analysieren und zu extrahieren.

Zwei Pakete node-fetch und cheerio sind gut genug für Web Scraping in JavaScript. Wir werden nicht jede Methode sehen, die die Pakete bieten. Wir werden den Ablauf des Web Scraping und die nützlichsten Methoden in diesem Ablauf sehen.

Sie werden Web Scraping lernen, indem Sie es tun. Also ran an die Arbeit.

Scraping Cricket World Cup-Liste

Hier in diesem Abschnitt werden wir das eigentliche Web Scraping durchführen.

Was extrahieren wir?

Anhand des Titels des Abschnitts denke ich, dass Sie es leicht erraten würden. Ja, was du denkst, ist richtig. Lassen Sie uns alle Cricket-Weltmeister und Zweitplatzierten bis jetzt extrahieren.

  • Erstellen Sie im Projekt eine Datei namens extract_cricket_world_cups_list.js.
  • Wir werden die verwenden Wikipedia Cricket-Weltmeisterschaft Seite, um die gewünschten Informationen zu erhalten.
  • Rufen Sie zunächst die Rohdaten mit dem node-fetch-Paket ab.
  • Der folgende Code ruft die Rohdaten der obigen Wikipedia-Seite ab.
const fetch = require("node-fetch");

// function to get the raw data
const getRawData = (URL) => {
   return fetch(URL)
      .then((response) => response.text())
      .then((data) => {
         return data;
      });
};

// URL for data
const URL = "https://en.wikipedia.org/wiki/Cricket_World_Cup";

// start of the program
const getCricketWorldCupsList = async () => {
   const cricketWorldCupRawData = await getRawData(URL);
   console.log(cricketWorldCupRawData);
};

// invoking the main function
getCricketWorldCupsList();

Wir haben die Rohdaten von der URL erhalten. Jetzt ist es an der Zeit, die benötigten Informationen aus den Rohdaten zu extrahieren. Verwenden wir das Paket cheerio, um die Daten zu extrahieren.

  Wie aktiviere ich CORS mit HTTPOnly-Cookie für sicheres Token?

Das Extrahieren von Daten, die HTML-Tags mit cheerio beinhalten, ist ein Kinderspiel. Bevor wir uns mit den eigentlichen Daten befassen, sehen wir uns einige Beispieldatenanalysen mit cheerio an.

  • Analysieren Sie die HTML-Daten mit der Methode cheerio.load.
const parsedSampleData = cheerio.load(
      `<div id="container"><p id="title">I'm title</p></div>`
   );
  • Wir haben den obigen HTML-Code analysiert. Wie kann man den Inhalt des p-Tags daraus extrahieren? Es ist dasselbe wie die Selektoren in der JavaScript-DOM-Manipulation.

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

Sie können die Tags nach Belieben auswählen. Sie können verschiedene Methoden aus dem ausprobieren Cheerio offizielle Website.

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

Hier ist der vollständige Code.

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

// function to get the raw data
const getRawData = (URL) => {
   return fetch(URL)
      .then((response) => response.text())
      .then((data) => {
         return data;
      });
};

// URL for data
const URL = "https://en.wikipedia.org/wiki/Cricket_World_Cup";

// start of the program
const getCricketWorldCupsList = async () => {
   const cricketWorldCupRawData = await getRawData(URL);

   // parsing the data
   const parsedCricketWorldCupData = cheerio.load(cricketWorldCupRawData);

   // extracting the table data
   const worldCupsDataTable = parsedCricketWorldCupData("table.wikitable")[0]
      .children[1].children;

   console.log("Year --- Winner --- Runner");
   worldCupsDataTable.forEach((row) => {
      // extracting `td` tags
      if (row.name === "tr") {
         let year = null,
            winner = null,
            runner = null;

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

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

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

         // extracting runner
         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}`);
         }
      }
   });
};

// invoking the main function
getCricketWorldCupsList();

Und hier sind die geschabten Daten.

Year --- Winner --- Runner
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

Cool 😎, oder?

  Wie wirken sich Verhaftungsaufzeichnungen auf Zuverlässigkeitsüberprüfungen aus, werden sie angezeigt?

Scraping-Vorlage

Das Abrufen der Rohdaten aus der URL ist in jedem Web-Scraping-Projekt üblich. Der einzige Teil, der sich ändert, ist das Extrahieren der Daten gemäß der Anforderung. Sie können den folgenden Code als Vorlage ausprobieren.

const fetch = require("node-fetch");
const cheerio = require("cheerio");
const fs = require("fs");
// function to get the raw data
const getRawData = (URL) => {
   return fetch(URL)
      .then((response) => response.text())
      .then((data) => {
         return data;
      });
};
// URL for data
const URL = "https://example.com/";
// start of the program
const scrapeData = async () => {
   const rawData = await getRawData(URL);
   // parsing the data
   const parsedData = cheerio.load(rawData);
   console.log(parsedData);
   // write code to extract the data
   // here
   // ...
   // ...
};
// invoking the main function
scrapeData();

Fazit

Sie haben gelernt, wie man eine Webseite scrapt. Jetzt sind Sie an der Reihe, das Programmieren zu üben.

Ich würde auch vorschlagen, sich beliebte Web-Scraping-Frameworks anzusehen, um sie zu erkunden, und Cloud-basierte Web-Scraping-Lösungen.

Viel Spaß beim Programmieren 🙂

Haben Sie den Artikel gerne gelesen? Wie wäre es mit der Welt zu teilen?