Web Scraping und Parsen von HTML in Node.js mit jsdom

Lesezeit: 4 Minuten

April 08, 2020
Autor:in:
Sam Agnew
Twilion

Web Scraping und Parsen von HTML in Node.js mit jsdom


Hallo und Danke fürs Lesen! Dieser Blogpost ist eine Übersetzung von Web Scraping and Parsing HTML in Node.js with jsdom. Während wir unsere Übersetzungsprozesse verbessern, würden wir uns über Dein Feedback an help@twilio.com freuen, solltest Du etwas bemerken, was falsch übersetzt wurde. Wir bedanken uns für hilfreiche Beiträge mit Twilio Swag :)

Im Internet findet sich eine große Vielfalt an Daten, die wir nach Belieben verwenden können. Der programmgesteuerte Zugriff auf diese Daten ist allerdings oft schwierig, sofern er nicht über eine dedizierte REST API bereitgestellt wird. Aber mit einem Node.js-Tool wie jsdom können wir diese Daten direkt aus den Webseiten scrapen und parsen, um sie für unsere Projekte und Anwendungen zu nutzen.

Ein Beispiel dafür wären MIDI-Daten, die wir benötigen, um ein neuronales Netzwerk so zu trainieren, dass es Musik im klassischen Nintendo-Stil generiert. Dazu brauchen wir zunächst MIDI-Dateien mit Musik aus alten Nintendo-Spielen. Mit jsdom können wir uns diese Daten aus dem Video Game Music Archive holen.

Vorbereitende Aufgaben und Einrichten von Abhängigkeiten

Als Erstes müssen wir eine aktuelle Version von Node.js und npm installieren.

Wir navigieren zu dem Verzeichnis, in dem wir den Code speichern möchten, und führen den folgenden Befehl auf dem Terminal aus, um ein Paket für dieses Projekt zu erstellen:

npm init --yes

Das Argument --yes durchläuft alle Eingabeaufforderungen, die wir ansonsten ausfüllen oder überspringen müssten. Wir haben jetzt eine package.json-Datei für unsere App.

Wir benötigen die Got-Bibliothek, um HTTP-Anfragen zum Abrufen von Daten von der Webseite durchzuführen. Das HTML parsen wir mit Cheerio.

Wir führen den folgenden Befehl auf dem Terminal aus, um diese Bibliotheken zu installieren:

npm install got@10.4.0 jsdom@16.2.2

jsdom ist eine reine JavaScript-Implementierung von zahlreichen Webstandards, was es zu einem vertrauten Tool für viele JavaScript-Entwickler macht. Wir sehen uns jetzt genauer an, wie jsdom funktioniert.

Abrufen von Daten zur Verwendung in jsdom mithilfe von Got

Als Erstes schreiben wir Code, um das HTML der Webseite zu erfassen und zu prüfen, wie wir das Parsing starten. Mit dem folgenden Code senden wir eine GET-Anfrage an die gewünschte Webseite und erstellen ein jsdom-Objekt mit dem HTML der Seite. Das Objekt nennen wir dom:

const fs = require('fs');
const got = require('got');
const jsdom = require("jsdom");
const { JSDOM } = jsdom;

const vgmUrl= 'https://www.vgmusic.com/music/console/nintendo/nes';

got(vgmUrl).then(response => {
  const dom = new JSDOM(response.body);
  console.log(dom.window.document.querySelector('title').textContent);
}).catch(err => {
  console.log(err);
});

Wenn wir an den JSDOM-Konstruktor eine Zeichenfolge übergeben, erhalten wir ein JSDOM-Objekt zurück, über das wir Zugriff auf eine Reihe von verwendbaren Eigenschaften wie window haben. Wie in diesem Code zu sehen ist, können wir durch den HTML-Code navigieren und DOM-Elemente für die gewünschten Daten mithilfe eines Abfrageselektors abrufen.

So erhalten wir beispielsweise mit querySelector('title').textContent den Text innerhalb des <title>-Tags auf der Seite. Wenn wir diesen Code in einer Datei mit dem Namen index.js speichern und ihn mit dem Befehl node index.js ausführen, wird der Titel der Webseite in der Konsole protokolliert.

Verwenden von CSS-Selektoren mit jsdom

Wenn wir eine spezifischere Abfrage stellen wollen, können wir eine Vielzahl von Selektoren nutzen, um durch das HTML zu parsen. Zu den beiden gängigsten Selektoren gehören die Suche nach Class (Klasse) oder ID. Um ein DIV (also einen Bereich) mit der ID „menu“ zu finden, würden wir querySelectorAll('#menu') verwenden, und um alle Headerspalten aus der Tabelle der VGM MIDIs zu erhalten, müssten wir querySelectorAll('td.header') verwenden.

Auf dieser Seite wollen wir uns die Hyperlinks zu allen MIDI-Dateien holen, die wir herunterladen möchten. Wir geben querySelectorAll('a') ein, um jeden Link auf der Seite abzurufen. Wir fügen dem Code in index.js Folgendes hinzu:

got(vgmUrl).then(response => {
  const dom = new JSDOM(response.body);
    dom.window.document.querySelectorAll('a').forEach(link => {
    console.log(link.href);
  });
}).catch(err => {
  console.log(err);
});

Dieser Code protokolliert die URL für jeden Link auf der Seite. Mit der Funktion forEach können wir durch alle Elemente eines bestimmten Selektors schalten. So schön es ist, dass wir nun durch jeden Link auf der Seite iterieren können – um alle MIDI-Dateien herunterladen zu können, müssen wir uns genauer ausdrücken.

Filtern von HTML-Elementen

Bevor wir weiteren Code zum Parsen des gewünschten Content schreiben, sehen wir uns das vom Browser gerenderte HTML an. Jede Webseite ist anders – um die richtigen Daten zurückzuerhalten, ist daher ein gewisses Maß an Kreativität, Mustererkennung und Experimentierfreudigkeit gefragt.

MIDI-Dateien auf der Website

Unser Ziel besteht darin, eine Reihe von MIDI-Dateien herunterzuladen. Allerdings gibt es auf dieser Webseite zahlreiche doppelte Tracks sowie Remixes der Songs. Wir brauchen nur jeweils eine Version jedes Songs. Und da wir letztendlich mit den betreffenden Daten ein neuronales Netzwerk so trainieren wollen, dass es stilechte Nintendo-Musik generiert, ist es nicht sinnvoll, benutzerspezifische Remixes für die Konfiguration zu verwenden.

Wer Code zum Parsen einer Webseite schreibt, sollte sich auch die Entwicklertools zunutze machen, die in den meisten modernen Browsern verfügbar sind. Wenn wir mit der rechten Maustaste auf das gewünschte Element klicken, können wir den HTML-Code prüfen, der dem Element zugrunde liegt. So verschaffen wir uns einen genaueren Einblick.

Element untersuchen

Wir können Filterfunktionen erstellen, um genauer festzulegen, welche Daten unsere Selektoren zurückgeben sollen. Diese Funktionen durchschleifen alle Elemente eines bestimmten Selektors und geben als Antwort „true“ (wahr) oder „false“ (falsch) zurück, je nachdem, ob sie im Set berücksichtigt werden sollen oder nicht.

Wer sich die im vorigen Schritt protokollierten Daten genauer angesehen hat, dem ist möglicherweise aufgefallen, dass es zahlreiche Links auf der Seite gibt, die kein href-Attribut haben und daher nirgendwohin führen. Da dies ganz sicher nicht die von uns gesuchten MIDIs sind, schreiben wir eine kurze Funktion, um diese Links sowie Elemente mit einem href-Element herauszufiltern, das zu einer .mid-Datei führt:

const isMidi = (link) => {
  // Return false if there is no href attribute.
  if(typeof link.href === 'undefined') { return false }

  return link.href.includes('.mid');
};

Die nächste Herausforderung ist, dass wir weder Duplikate noch benutzergenerierte Remixes herunterladen wollen. Wir erreichen dies mit regulären Ausdrücken. Diese sorgen dafür, dass wir nur Links mit Text ohne Klammern erhalten – schließlich enthalten nur die Duplikate und Remixes Klammern:

const noParens = (link) => {
  // Regular expression to determine if the text has parentheses.
  const parensRegex = /^((?!\().)*$/;
  return parensRegex.test(link.textContent);
};

Wir versuchen, diese unserem Code in der index.js hinzuzufügen. Dazu erstellen wir ein Array aus der Sammlung der HTML-Elementknoten, die von querySelectorAll zurückgegeben werden, und wenden unsere Filterfunktionen darauf an:

got(vgmUrl).then(response => {
  const dom = new JSDOM(response.body);

  // Create an Array out of the HTML Elements for filtering using spread syntax.
  const nodeList = [...dom.window.document.querySelectorAll('a')];

  nodeList.filter(isMidi).filter(noParens).forEach(link => {
    console.log(link.href);
  });
}).catch(err => {
  console.log(err);
});

Wenn wir diesen Code erneut ausführen, sollten nur .mid-Dateien ohne Duplikate von bestimmten Songs ausgegeben werden.

Herunterladen der gewünschten MIDI-Dateien von der Webseite

Wir haben also jetzt den nötigen Code, um durch jede der gewünschten MIDI-Dateien zu iterieren. Nun brauchen wir Code, um alle dieser Dateien herunterzuladen.

In der Callback-Funktion für das Durchschleifen aller MIDI-Links fügen wir diesen Code hinzu. Der MIDI-Download wird dann in eine lokale Datei gestreamt, inklusive Fehlerprüfung:

  nodeList.filter(isMidi).filter(noParens).forEach(link => {
    const fileName = link.href;
    got.stream(`${vgmUrl}/${fileName}`)
      .on('error', err => { console.log(err); console.log(`Error on ${vgmUrl}/${fileName}`) })
      .pipe(fs.createWriteStream(`MIDIs/${fileName}`))
      .on('error', err => { console.log(err); console.log(`Error on ${vgmUrl}/${fileName}`) })
      .on('finish', () => console.log(`Downloaded: ${fileName}`));
  });

Wir führen diesen Code von dem Verzeichnis aus, in dem wir alle MIDI-Dateien speichern möchten. Wir sollten auf dem Terminal-Bildschirm sehen, dass alle 2230 MIDI-Dateien heruntergeladen wurden (Zahl zum Zeitpunkt der Erstellung dieses Blogs). Und damit haben wir das Scraping aller erforderlichen MIDI-Dateien abgeschlossen.

Erfassung der Ergebnisse der Datei-Downloads

Jetzt können wir durch die Liste gehen, die Songs anhören und die Nintendo-Musik genießen!

Die endlose Weite des World Wide Web

Wir wissen nun, wie man programmgesteuert Inhalte aus Webseiten extrahieren kann, das heißt, wir haben jetzt Zugang zu einer gigantischen Datenquelle mit allem, was wir für unsere Projekte brauchen. Zu beachten ist, dass jegliche Änderungen am HTML einer Webseite zu Fehlern in unserem Code führen können. Daher ist es wichtig, dass wir alles auf dem neuesten Stand halten, wenn wir Anwendungen auf der Basis dieses Codes entwerfen. Es könnte außerdem hilfreich sein, die Funktionen der jsdom-Bibliothek mit anderen Lösungen zu vergleichen. Wir können uns dazu die Tutorials zu den Themen Web Scraping mit Cheerio und Headless-Browser-Scripting mit Puppeteer bzw. einer ähnlichen Bibliothek namens Playwright ansehen.

Wie könnten wir die aus dem Video Game Music Archive extrahierten Daten nun weiterverwenden? Mit einer Python-Bibliothek wie Magenta können wir beispielsweise ein neuronales Netzwerk damit trainieren.

Ich bin gespannt auf eure Ergebnisse. Ihr könnt mich gerne kontaktieren, um eure Erfahrungen zu teilen oder Fragen zu stellen.

Verwandte Posts

Ähnliche Ressourcen

A newspaper article

Twilio Docs

Von APIs über SDKs bis hin zu Beispiel-Apps

API-Referenzdokumentation, SDKs, Hilfsbibliotheken, Schnellstarts und Tutorials für Ihre Sprache und Plattform.
An Open book

Ressourcen-Center

Die neuesten E-Books, Branchenberichte und Webinare

Lernen Sie von Customer-Engagement-Experten, um Ihre eigene Kommunikation zu verbessern.
User group reactions

Ahoy

Twilios Entwickler-Community-Hub

Best Practices, Codebeispiele und Inspiration zum Aufbau von Kommunikations- und digitalen Interaktionserlebnissen.