Bevor wir beginnen, müssen Sie die örtlichen Gesetze und Vorschriften einhalten und dürfen keine Daten entfernen, die ohne Genehmigung offengelegt werden.
Hier sind einige Dinge, die Sie für dieses Tutorial benötigen:
Cheerio ist ein Tool zum Parsen von HTML und XML in Node.js. Es ist auf GitHub sehr beliebt und hat mehr als 23.000 Sterne.
Es ist schnell, flexibel und einfach zu bedienen. Da es eine Teilmenge von JQuery implementiert, ist der Einstieg in Cheerio einfach, wenn Sie bereits mit JQuery vertraut sind.
Der Hauptunterschied zwischen Cheerio und einem Webbrowser besteht darin, dass Cheerio kein visuelles Rendering generiert, kein CSS lädt, keine externen Ressourcen lädt und kein JavaScript ausführt. Es analysiert lediglich das Markup und stellt eine API zum Bearbeiten der resultierenden Datenstrukturen bereit. Das erklärt, warum es auch sehr schnell ist – Cheerio-Dokumentation.
Wenn Sie Cheerio zum Abrufen von Webseiten verwenden möchten, müssen Sie zunächst ein Paket wie axios oder node-fetch verwenden, um die Tags abzurufen.
In diesem Beispiel crawlen wir die ISO 3166-1 Alpha-3-Codes für alle auf dieser Wikipedia-Seite aufgeführten Länder und anderen Gerichtsbarkeiten. Es befindet sich im aktuellen Codeabschnitt der ISO 3166-1 Alpha-3-Seite.
So sieht die Liste der Länder/Gerichtsbarkeiten und ihrer entsprechenden Codes aus:
In diesem Schritt erstellen Sie ein Verzeichnis für Ihr Projekt, indem Sie den folgenden Befehl auf dem Terminal ausführen. Dieser Befehl erstellt eine Datei mit dem Namen learn-cheerio . Sie können ihr bei Bedarf einen anderen Namen geben.
mkdir learn-cheerio
learn-cheerio Nachdem Sie den obigen Befehl erfolgreich ausgeführt haben, sollten Sie einen Ordner mit dem Namen „created“ sehen können.
Im nächsten Schritt öffnen Sie das gerade erstellte Verzeichnis in Ihrem bevorzugten Texteditor und initialisieren das Projekt.
In diesem Schritt navigieren Sie zum Projektverzeichnis und initialisieren das Projekt. Öffnen Sie das Verzeichnis, das Sie im vorherigen Schritt erstellt haben, in Ihrem bevorzugten Texteditor und initialisieren Sie das Projekt, indem Sie den folgenden Befehl ausführen.
npm init -y
Eine erfolgreiche Ausführung des obigen Befehls erstellt eine Datei package.json im Stammverzeichnis des Projektverzeichnisses.
Im nächsten Schritt installieren Sie die Projektabhängigkeiten.
In diesem Schritt installieren Sie die Projektabhängigkeiten, indem Sie den folgenden Befehl ausführen. Dies kann einige Minuten dauern. Bitte haben Sie etwas Geduld.
npm i axios cheerio Pretty
Durch die erfolgreiche Ausführung des obigen Befehls werden drei Abhängigkeiten in der Datei unter dem Feld package.json registriert. dependencies Die erste Abhängigkeit ist axios , die zweite ist cheerio und die dritte ist pretty .
axios ist ein sehr beliebter http-Client, der in Knoten und Browsern ausgeführt werden kann. Wir brauchen es, weil Cheerio ein Token-Parser ist.
Damit Cheerio die Tags analysieren und die von Ihnen benötigten Daten crawlen kann, benötigen wir axios zum Abrufen der Tags von der Website. Wenn Sie möchten, können Sie einen anderen HTTP-Client verwenden, um das Token abzurufen. Es muss nicht axios sein.
Pretty ist ein NPM-Paket zur Verschönerung des Markups, damit es beim Drucken auf dem Terminal lesbar ist.
Im nächsten Abschnitt untersuchen Sie die Tags, aus denen Daten extrahiert werden.
Bevor Sie Daten von einer Webseite extrahieren, ist es wichtig, die HTML-Struktur der Seite zu verstehen.
In diesem Schritt untersuchen Sie die HTML-Struktur der Webseite, von der Sie Daten extrahieren möchten.
Navigieren Sie zur Seite mit den ISO 3166-1 Alpha-3-Codes auf Wikipedia. Im Abschnitt „Aktuelle Codes“ finden Sie eine Liste der Länder und der entsprechenden Codes. CTRL + SHIFT + I Sie können DevTools öffnen, indem Sie die Tastenkombination in Chrome drücken oder mit der rechten Maustaste klicken und die Option „Inspizieren“ auswählen.
Dies ist meine Liste in Chrome DevTools:
Im nächsten Abschnitt schreiben Sie den Code zum Crawlen des Webs.
In diesem Abschnitt schreiben Sie den Code zum Scrapen der Daten, an denen wir interessiert sind. Führen Sie zunächst den folgenden Befehl aus, der die Datei app.js erstellt.
touch app.js
Durch die erfolgreiche Ausführung des obigen Befehls wird eine Datei app.js im Stammverzeichnis des Projektverzeichnisses erstellt.
Wie bei jedem anderen Node-Paket müssen Sie zunächst axios , cheerio und axios benötigen , bevor Sie sie verwenden können. Sie können dies tun, indem Sie den folgenden Code oben in die Datei einfügen, die Sie gerade pretty haben. app.js
const axios = require("axios");
const cheerio = require("cheerio");
const Pretty = require("Pretty"); Bevor wir den Code zum Scrapen der Daten schreiben, müssen wir cheerio lernen. Wir werden das Markup unten analysieren und versuchen, die resultierende Datenstruktur zu manipulieren. Dies wird uns helfen, die Cheerio-Syntax und die am häufigsten verwendeten Methoden zu erlernen.
Das folgende Markup ist ul li Element, das unser Element enthält.
const markup = ` <ul class="fruits"> <li class="fruits__mango">Mango</li> <li class="fruits__apple"> Apfel </li> </ul> `;
Fügen Sie die obige Variablendeklaration zur Datei app.js hinzu.
cheerio können Tags mit der Methode cheerio.load laden. Diese Methode verwendet den Marker als Parameter. Außerdem sind zwei zusätzliche optionale Parameter erforderlich. Wenn Sie interessiert sind, können Sie in der Dokumentation mehr darüber lesen.
Nachfolgend übergeben wir den ersten und einzigen erforderlichen Parameter und speichern den Rückgabewert in der Variablen $ . Wir verwenden diese Variable aufgrund der Ähnlichkeit von cheerio mit Jquery $ . Sie können bei Bedarf unterschiedliche Variablennamen verwenden.
Fügen Sie den folgenden Code zu Ihrer app.js Datei hinzu:
const $ = cheerio.load(markup); console.log(pretty($.html()));
Wenn Sie nun den Code im Dateiknoten node app.js ausführen, indem Sie den Befehl app.js auf dem Terminal ausführen, sollten Sie das Markup auf dem Terminal sehen können. Folgendes sehe ich auf dem Terminal:
Cheerio unterstützt die gängigsten CSS-Selektoren, wie z. B. class , id und element . Im folgenden Code wählen wir ein Element mit der Klasse fruits__mango aus und protokollieren das ausgewählte Element dann in der Konsole. Fügen Sie den folgenden Code zu Ihrer app.js Datei hinzu.
const mango = $(".fruits__mango");
console.log(mango.html()); // Mango Wenn Sie die Befehlsausführung verwenden, protokolliert Mango den Text auf dem Terminal. app.js``node app.js
Sie können auch ein Element auswählen und bestimmte Attribute wie class , id oder alle Attribute und ihre entsprechenden Werte abrufen.
Fügen Sie den folgenden Code zu Ihrer app.js Datei hinzu:
const apple = $(".fruits__apple");
console.log(apple.attr("class")); // Der obige Code Fruits__Apple meldet sich am fruits__apple -Terminal an. fruits__apple ist die Klasse des ausgewählten Elements.
Cheerio bietet die .each Methode, um mehrere ausgewählte Elemente zu durchlaufen.
Nachfolgend wählen wir alle Elemente aus und durchlaufen sie mit der Methode li . .each protokollieren wir den Textinhalt jedes Listenelements auf dem Terminal.
Fügen Sie den folgenden Code zu Ihrer app.js Datei hinzu.
const listItems = $("li");
console.log(listItems.length); // 2
listItems.each(function (idx, el) {
console.log($(el).text());
});
//Mango
// Der obige Apple-Code zeichnet 2 auf, was der Länge des Listenelements entspricht. Nach der Ausführung des Codes wird der Text Mango und auf dem Terminal angezeigt. Apple``app.js
an Cheerio bietet eine Möglichkeit, Elemente an Markup anzuhängen oder hinzuzufügen.
Die append -Methode hängt das als Parameter übergebene Element nach dem letzten untergeordneten Element des ausgewählten Elements an. Andererseits fügt prepend das übergebene Element vor dem ersten untergeordneten Element des ausgewählten Elements hinzu.
Fügen Sie Ihrer app.js Datei den folgenden Code hinzu:
const ul = $("ul");
ul.append("<li>Banana</li>");
ul.prepend("<li>Ananas</li>");
console.log(pretty($.html())); Nach dem Hinzufügen und Hinzufügen von Elementen zum Markup sehe ich Folgendes, wenn ich mich $.html() Terminal anmelde:
Dies sind die Grundlagen von Cheerio, um Ihnen den Einstieg in das Web-Scraping zu erleichtern. Um die Daten aus Wikipedia zu extrahieren, die wir am Anfang dieses Artikels beschrieben haben, kopieren Sie den folgenden Code und fügen Sie ihn in die Datei app.js ein:
// Laden der Abhängigkeiten Wir brauchen keine hübschen
// weil wir HTML nicht im Terminal protokollieren sollen
const axios = require("axios");
const cheerio = require("cheerio");
const fs = require("fs");
// URL der Seite, die wir scrapen möchten
const url = "https://en.wikipedia.org/wiki/ISO_3166-1_alpha-3";
// Asynchrone Funktion, die die Daten scrapt
asynchrone Funktion scrapeData() {
versuchen {
// HTML der Seite abrufen, die wir scrapen möchten
const { data } = waiting axios.get(url);
// HTML laden, das wir in der vorherigen Zeile abgerufen haben
const $ = cheerio.load(data);
// Alle Listenelemente in der Plainlist-Klasse auswählen
const listItems = $(".plainlist ul li");
// Speichert Daten für alle Länder
const Länder = [];
// Verwenden Sie die .each-Methode, um die von uns ausgewählten li zu durchlaufen
listItems.each((idx, el) => {
// Objekt, das Daten für jedes Land/jede Gerichtsbarkeit enthält
const country = { name: "", iso3: "" };
// Wählen Sie den Textinhalt von a- und span-Elementen aus
// Den Textinhalt im obigen Objekt speichern
land.name = $(el).children("a").text();
land.iso3 = $(el).children("span").text();
// Länder-Array mit Länderdaten füllen
Länder.push(Land);
});
// Protokolliert das Länder-Array in der Konsole
console.dir(Länder);
// Länder-Array in die Datei „country.json“ schreiben
fs.writeFile("coutries.json", JSON.stringify(countries, null, 2), (err) => {
if (irre) {
console.error(err);
zurückkehren;
}
console.log("Daten erfolgreich in Datei geschrieben");
});
} fangen (irrt) {
console.error(err);
}
}
//Rufen Sie die obige Funktion auf
scrapeData(); Verstehen Sie, was passiert, wenn Sie den Code lesen? Wenn nicht, gehe ich jetzt ins Detail. Ich habe auch jede Codezeile kommentiert, um Ihnen das Verständnis zu erleichtern.
Im obigen Code benötigen wir alle Abhängigkeiten oben in der Datei app.js und deklarieren dann die Funktion scrapeData . Innerhalb der Funktion wird der abgerufene HTML-Code der Seite, die wir durchsuchen müssen, dann mithilfe von axios in cheerio geladen.
Die Liste der Länder und ihrer entsprechenden iso3 -Codes wird in einem div Element mit der Klasse plainlist verschachtelt. Die li -Elemente werden ausgewählt und wir durchlaufen sie dann mithilfe der .each -Methode. Die Daten für jedes Land werden gescrapt und in einem Array gespeichert.
Nach der Ausführung des obigen Codes mit dem Befehl node app.js werden die erfassten Daten in die Datei countries.json geschrieben und auf dem Terminal gedruckt. Dies ist ein Teil dessen, was ich auf dem Terminal sehe:
Vielen Dank, dass Sie diesen Artikel gelesen haben! Wir haben die Verwendung von cheerio bereits behandelt. Wenn Sie tiefer gehen und die Funktionsweise vollständig verstehen möchten, können Sie sich die Cheerio-Dokumentation ansehen.