zurück zum Artikel

Webseiten zu analysieren ist eine gängige Anforderung: Es lässt sich beispielsweise nutzen, um Links zu validieren, Bilder zu extrahieren oder Preise zu analysieren. Die Herausforderung dabei liegt im Parsen von HTML-Dateien und dem Traversieren des DOMs. Das Modul Cheerio schafft Abhilfe.

Webseiten zu analysieren ist eine gängige Anforderung: Es lässt sich beispielsweise nutzen, um Links zu validieren, Bilder zu extrahieren oder Preise zu analysieren. Die Herausforderung dabei liegt im Parsen von HTML-Dateien und dem Traversieren des DOMs. Das Modul Cheerio schafft Abhilfe.

Das Modul Cheerio [2] implementiert den serverseitig sinnvollen Kern von jQuery und stellt ihn für Node.js zur Verfügung. Das erlaubt dem Entwickler, die aus dem Webbrowser bekannten Abfragemöglichkeiten auch auf dem Server zu verwenden.

Um den Titel einer Webseite mit jQuery zu extrahieren, genügt der Aufruf der Funktion $ mit dem passenden Selektor:

let title = $('title').text();

Cheerio verspricht, den gleichen Code auch auf dem Server ausführen zu können. Dazu ist zunächst Cheerio zu installieren, was auf dem gewohnten Weg mit Hilfe von npm in den Kontext der Anwendung erfolgt:

$ npm install cheerio

Danach lässt sich das Modul laden, wozu wie üblich die require-Funktion dient:

var cheerio = require('cheerio');

Das cheerio-Objekt stellt anschließend die load-Funktion zur Verfügung, mit der sich HTML-Quellcode laden lässt. Das ist im Unterschied zu jQuery explizit erforderlich, da auf dem Server kein standardmäßig vorhandenes DOM zur Verfügung steht.

HTML laden

Da der Quellcode in der Regel nicht bereits vorliegen wird, empfiehlt sich hierfür der Einsatz eines weiteren Moduls wie request [3]:

'use strict';

let cheerio = require('cheerio'),
    request = require('request');

request('http://www.thenativeweb.io', function (err, res, body) {
  // ...
});

Falls beim Abrufen der Webseite kein Fehler aufgetreten ist, enthält der Parameter body den bereits fertig geladenen Quellcode: Das Verwalten des zugrunde liegenden Streams entfällt in dem Fall.

Anschließend lässt sich der Titel der Webseite mit dem bereits erwähnten Code-Schnipsel auslesen:

let title = $('title').text();

Bilder extrahieren

Auf dem gleichen Weg sind jedoch auch komplexere Abfragen möglich: Um beispielsweise alle Bildpfade zu extrahieren, muss man zunächst alle img-Elemente ermitteln:

let images = $('img');

Die Variable images enthält anschließend nicht, wie man vielleicht vermuten würde, ein Array, sondern ein Objekt, dessen Elemente durchnummeriert sind. Zusätzlich enthält es jedoch einige weitere Eigenschaften, weshalb der typische Weg, alle Schlüssel eines Objekts zu durchlaufen, nicht das gewünschte Ergebnis zurückgibt:

Object.keys(images).forEach(function (key) {
  // ...
});

Da das Objekt über eine length-Eigenschaft verfügt, lässt es sich wie ein Array verwenden:

for (let i = 0; i < images.length; i++) {
  let image = images[i];
  // ...
}

Der elegantere Weg ist allerdings, die Funktionen each oder map zu verwenden, die Cheerio zur Verfügung stellt. In der Funktion, die each als Callback übergeben wird, zeigt this dann auf das jeweilige Element. Um beispielsweise alle Bildpfade zu ermitteln, genügt es dann, das src-Attribut des Elements abzufragen:

images.each(function () {
  let source = $(this).attr('src');
  // ...
});

Der Aufruf liefert nun wie gewünscht die Pfade, die sich dann beispielsweise verwenden lassen, um die Bilder herunterzuladen.

Das DOM verändern

Wie jQuery kennt Cheerio allerdings nicht nur Funktionen zum Auslesen, sondern auch zum Verändern des DOMs. Hierzu stehen die üblichen Funktionen von jQuery zur Verfügung, beispielsweise append oder remove. Wichtig hierbei ist, am Ende aus dem manipulierten DOM wiederum gültigen HTML-Quelltext zu erhalten. Dazu dient die Funktion html, die am Objekt $ aufgerufen werden muss. Soll XML-konformer Quelltext erzeugt werden, ist stattdessen die Funktion xml zu verwenden:

console.log($.xml());

Ist zum Verändern des DOMs der Zugriff auf den obersten Knoten erforderlich, gelingt das mit dem Aufruf der Funktion root, die ebenfalls am $-Objekt zur Verfügung steht.

Einen Überblick über alle verfügbaren Funktionen liefert die ausführliche Dokumentation [4] auf der Webseite des Projekts.

tl;dr: Cheerio ist ein Node.jsModul, das den Kern von jQuery auf den Server bringt. Es ermöglicht das serverseitige Analysieren und Verändern von Webseiten mit der gleichen API wie mit jQuery im Webbrowser. ( [5])

URL dieses Artikels:
https://www.heise.de/-2651656

Links in diesem Artikel:
[1] http://www.heise.de/developer/developer_redakteur_2548746.html
[2] https://github.com/cheeriojs/cheerio
[3] https://github.com/request/request
[4] https://github.com/cheeriojs/cheerio
[5] mailto:webmaster@goloroden.de

Copyright © 2015 Heise Medien