So führen Sie Web Scraping mit Javascript durch: Eine umfassende Anleitung

Sie möchten lernen, wie Sie mit Javascript Web Scraping durchführen, wissen aber nicht, wo Sie anfangen sollen? Keine Sorge.

In diesem Blog stellen wir Ihnen alle notwendigen Informationen zur Verfügung, die Sie für den Einstieg ins Javascript Scraping benötigen. Außerdem führen wir Sie Schritt für Schritt durch das Scraping einer Website mit JavaScript und Puppeteer.

Lass uns loslegen.

Was ist JavaScript-Scraping?

Im heutigen digitalen Zeitalter ist JavaScript für Web-Scraping zu einer unverzichtbaren Fähigkeit geworden, die nicht nur für Entwickler und Datenenthusiasten, sondern auch für Vermarkter unerlässlich ist.

Im Kern ist JavaScript-Scraping der Prozess, bei dem JavaScript-basierte Bibliotheken oder Tools verwendet werden, um wertvolle Daten von Websites zu extrahieren. Sie können zwar andere Programmiersprachen verwenden, wie z. B. Python zum Scrapen einer Website, Javascript-Scraping ist besonders nützlich, um Informationen von Websites zu sammeln, die viel JavaScript zur Anzeige von Inhalten verwenden.

Wenn Sie eine Website mit JavaScript scrapen, schreiben Sie im Wesentlichen Code, um den Prozess der Datenerfassung aus einem Webbrowser zu automatisieren. Es handelt sich um eine leistungsstarke Methode zur Datenextraktion, mit der sich in relativ kurzer Zeit große Mengen an Informationen erfassen lassen.

Ob Sie Markttrends analysieren, Informationen zur Konkurrenz sammeln oder Daten zur Lead-Generierung für Ihr Unternehmen erfassen möchten – Data Scraping mit JavaScript kann ein unschätzbar wertvolles Tool sein. Diese Methode nutzt die Funktionen von JavaScript, einer tief in der Webentwicklung verwurzelten Sprache, um auf verschiedenen Webseiten zu navigieren, sie auszuwählen und Daten daraus zu extrahieren.

Nachdem wir nun verstanden haben, was Javascript-Web-Scraping ist, wollen wir herausfinden, wie Sie Javascript zum Scrapen einer Site verwenden können.

3 gängige Methoden zum Scrapen einer Website mit JavaScript

Es gibt mehrere Möglichkeiten, mit JavaScript eine Website zu scrapen. Aber welche sollten Sie verwenden? Nun, die Antwort darauf hängt von Ihren Scraping-Anforderungen ab. In diesem Abschnitt erklären wir drei gängige Methoden, mit denen Benutzer mithilfe von Javascript eine Website scrapen.

Cheerio für einfache statische Websites

Haben Sie HTML-Websites gesehen, deren Inhalt bei der ersten Anfrage schnell geladen wird? Das liegt daran, dass sie keine umfangreichen Inhalte wie Videos oder komplexe Animationen enthalten. Bei der Verwendung solcher statischer Websites ist die Verwendung von Cheerio ist eine ideale Wahl.

Indem Cheerio das reine HTML der Seite über einen HTTP-Client abruft, können Sie das DOM einfach durchlaufen und bearbeiten.

Es ist leichtgewichtig und schnell, vor allem, weil es nicht die gesamte Browserumgebung laden muss. Wie bereits erwähnt, eignet sich diese Methode perfekt für einfache, statische Websites, bei denen die Daten im HTML-Code leicht verfügbar sind.

Puppenspieler zum Scraping dynamischer Inhalte

Wenn Sie mit einer komplexeren Website arbeiten, die dynamische Inhalte wie Videos und Bilder enthält, oder mit JavaScript-lastigen Websites, auf denen Inhalte dynamisch geladen werden, ist Puppeteer, eine Node-Bibliothek, die beste Wahl.

Puppeteer verwendet einen Headless-Browser, einen Webbrowser ohne grafische Benutzeroberfläche (GUI), um mit Webseiten zu interagieren. Das bedeutet Es kann Benutzeraktionen wie das Klicken auf Schaltflächen oder Scrollen emulieren, die für den Zugriff auf Inhalte, die als Ergebnis dieser Interaktionen angezeigt werden, unerlässlich sind.

Puppeteer ist leistungsstark für das Scraping moderner Webanwendungen, die auf AJAX basieren und eine vollständige Browserumgebung zum Ausführen von JavaScript-Code und Rendern von Inhalten benötigen.

Eine Website mit jQuery scrapen

Manchmal müssen Sie möglicherweise keine großen Datenmengen scrapen. Möglicherweise müssen Sie schnell Informationen extrahieren, beispielsweise bestimmte E-Mail-Adressen. In solchen Fällen jQuery kann ein praktisches Tool sein. Obwohl es sich um ein clientseitiges Skript handelt, das im Browser ausgeführt wird, können Sie mit jQuery problemlos Daten von Webseiten auswählen und extrahieren.

Diese Methode ist besonders nützlich für Ad-hoc-Scraping-Aufgaben. Öffnen Sie einfach Ihre Konsole, schreiben Sie ein paar Zeilen jQuery-Code und extrahieren Sie die benötigten Informationen. Dieser Ansatz eignet sich jedoch nicht für umfangreiche oder automatisierte Scraping-Aufgaben.

Jede dieser Methoden hat ihre eigenen Vorteile und eignet sich für unterschiedliche Scraping-Anforderungen. Ob einmalige Datenextraktion oder komplexe Scraping-Aufgabe mit dynamischen Inhalten, JavaScript bietet eine robuste und flexible Lösung.

In dieser Anleitung führen wir jedoch Web Scraping in Javascript mit Puppeteer durch. Wir führen Sie Schritt für Schritt durch den Prozess des Web Scrapings mit Javascript und Puppeteer.

Wie führt man Web Scraping mit Javascript und Puppeteer durch?

Web Scraping kann manchmal entmutigend wirken, aber die Aufgabe wird 10x einfacher, wenn Sie die richtigen Tools kennen. In diesem Abschnitt werden wir Entdecken Sie, wie Sie Puppeteer, eine Node-Bibliothek, für Web-Scraping verwenden. Puppeteer ist ein perfektes JavaScript-Tool für das Scraping dynamischer Inhalte.

Wir unterteilen den Vorgang in drei einfache Schritte und zeigen Ihnen, wie Sie Bilder aus einer Google-Suche nach „glücklicher Hund“ extrahieren. Legen wir los!

Schritt 1: Ein neues Verzeichnis erstellen und Puppeteer installieren

Das Wichtigste zuerst: Richten wir unsere Projektumgebung ein. Erstellen Sie zunächst ein neues Projektverzeichnis und initialisieren Sie es.

Installieren Sie anschließend Puppeteer, das wir zum Scraping verwenden werden. Öffnen Sie Ihre Konsole und führen Sie die folgenden Befehle aus:

• Zum Erstellen eines neuen Verzeichnisses:mkdir web-scraping-puppeteer

• Zum Verschieben in das Verzeichnis: cd web-scraping-puppeteer

• Initialisieren eines neuen Node.js-Projekts: npm init -y

• Puppeteer wird installiert:npm install puppeteer
  
  
  

Schritt 2: Den ursprünglichen Code schreiben

Schreiben wir nun den ursprünglichen Code, um einen Browser zu starten, zu Google Bilder zu navigieren und nach "happy do g". Wir verwenden Puppeteer, um ein neues Browserfenster zu öffnen, den Ansichtsbereich festlegen und mit den Seitenelementen zu interagieren.

Hier ist der Code für diesen Schritt:

Erklärung des Codes:

• const puppeteer = require('puppeteer');

  • Erinnern Sie sich, dass wir im ersten Schritt den Puppeteer in unserem System installiert haben? Diese Zeile importiert die Puppeteer-Bibliothek in das Skript. Anschließend können wir ihre Funktionen zur Steuerung eines Headless-Browsers verwenden.

• (async () => { ... })();

  • Diese Zeile deklariert eine asynchrone Funktion. Diese Funktion übernimmt die Web-Scraping-Aufgaben. Asynchrone Funktionen ermöglichen es uns, Warten Sie, bis bestimmte Aktionen (wie das Laden der Seite) abgeschlossen sind, bevor Sie mit dem nächsten Schritt fortfahren. Dies ist beim Web Scraping von entscheidender Bedeutung.

• const browser = await puppeteer.launch();

  • Diese Zeile weist Puppeteer an, eine neue Browsersitzung zu starten. Das Schlüsselwort „await“ wird verwendet, um sicherzustellen, dass der Browser vollständig gestartet ist, bevor das Skript fortgesetzt wird.

• const page = await browser.newPage();

  • Nach dem Starten des Browsers öffnet dieser Befehl eine neue Seite (oder Registerkarte) im Browser.

• await page.goto('https://www.google.com/imghp?hl=en');

  • Das Skript navigiert die geöffnete Seite zur angegebenen URL, in diesem Fall zur Google Bilder-Suchseite. Das Schlüsselwort "await" stellt sicher, dass die Navigation abgeschlossen ist, bevor fortgefahren wird.

• warte auf page.setViewport({ Breite: 1080, Höhe: 1024 });

  • Dadurch werden die Abmessungen des Ansichtsfensters (des sichtbaren Bereichs der Seite) festgelegt. Dies ist wichtig für Screenshots oder für Seiten, deren Layout sich je nach Bildschirmgröße ändert.

• warte auf page.type('textarea[name="q"]', 'glücklicher Hund');

  • Dieser Befehl simuliert die Eingabe des Textes „glücklicher Hund“ in ein Eingabefeld auf der Seite, und zwar einen Text mit dem Namensattribut „q“ (das in Google Bilder das Suchfeld ist).

• warte auf Seite.Klick('button[type="submit"]');

  • Diese Zeile simuliert einen Klick auf die Schaltfläche "Senden" des Formulars und löst die Suche aus.

• await page.waitForNavigation();

  • Nachdem Sie auf die Schaltfläche "Senden" geklickt haben, wartet dieser Befehl, bis die Seitennavigation abgeschlossen ist (d. h., bis die Suchergebnisse geladen sind).

• warte auf Browser.close();

  • Sobald alle vorherigen Schritte abgeschlossen sind, schließt dieser Befehl den Browser.
    
    

Schritt 3: Abrufen des Bildes des „glücklichen Hundes“ von Google Bilder.

Jetzt besteht unser Ziel darin, das Bild auszuwählen, das wir scrapen möchten, und seine Klasse, ID und Quell-URL innerhalb seines Divs zu identifizieren.

Öffnen Sie dazu Ihren Browser, suchen Sie nach „Happy Dog“ und klicken Sie auf das Bild, das Sie scrapen möchten. Nachdem das Bild vergrößert wurde, klicken Sie mit der rechten Maustaste darauf und wählen Sie die Option „Untersuchen“.

Die Option „Überprüfen“ zeigt Ihnen den Div-Container des Bildes an, der dessen Klasse, ID und Quell-URL enthält, die Sie kopieren müssen, um sie in Ihren Code einzufügen.

So würde der vollständige Code aussehen:

In diesem Code:

• Wir stellen zunächst sicher, dass Puppeteer zu Google Bilder navigiert und die Suche nach „glücklicher Hund“ durchführt.

• Sobald die Ergebnisse geladen sind, wählen wir alle Bilder aus, die der Klasse „.sFlh5c.pT0Scc.iPVvYb“ entsprechen.

• Anschließend klicken wir auf das gewünschte Bild in der Liste, um die Vorschau auszulösen.

• Wir warten, bis der Vorschau-Container (#islsp) und das große Bild darin geladen sind.

• Schließlich extrahieren wir das src-Attribut des großen Bildes, das dessen URL enthält.
  
  

Falls Sie sich fragen, wir haben in diesem Code if- und else-Anweisungen verwendet, um sicherzustellen, dass gibt „Keine Bilder mit der angegebenen Klasse gefunden zurück, wenn die falsche Klasse ansonsten kommt manchmal zu Codeunterbrechungen.

Sie haben nun erfolgreich gelernt, wie Sie eine Website mit JavaScript und Puppeteer scrapen. Mit demselben Ansatz können Sie mehrere Bilder von jeder beliebigen Website scrapen.

Einige Websites erlauben jedoch kein Scraping ihrer Inhalte. Sie verfügen über Anti-Scraping-Techniken. Das macht es Ihnen schwer, die Arbeit zu erledigen. Oder, noch schlimmer, Sie werden möglicherweise völlig blockiert.

Aber auch für dieses Problem gibt es eine Lösung. Lesen Sie den nächsten Abschnitt, um mehr darüber zu erfahren, wie Sie Websites scrapen, ohne erkannt oder blockiert zu werden.

Verwenden Sie AdsPower für unerkanntes Surfen

Wenn Sie beim Daten-Scraping mit JavaScript eine zusätzliche Schutzebene hinzufügen möchten, ist AdsPower der beste Anti-Erkennungs-Browser, den Sie verwenden können.AdsPower Browser gewährleistet ein nahtloses Web-Scraping-Erlebnis, indem Anti-Scraping-Herausforderungen effektiv umgangen werden.

Sie können damit auch mehrere Benutzerprofile erstellen und im Internet anonym bleiben. Melden Sie sich noch heute an, um sich Ihre Zukunft zu sichern.

Zusammenfassung!

Das Erlernen des Web-Scrapings mit JavaScript eröffnet eine Welt voller Datenmöglichkeiten. Ob für persönliche Projekte oder professionelle Analysen, Tools wie Puppeteer machen es zugänglich und effizient.

Verwenden Sie die in diesem Blog erwähnte Technik und scrapen Sie die Informationen, die Sie benötigen. Vergessen Sie außerdem nicht, AdsPower für sicheres Scraping zu verwenden.