Wie man HTML-Tabellen in JavaScript scrappt

Mihai Maxim am 31. Januar 2023

Zu wissen, wie man HTML-Tabellen mit Javascript scrapen kann, kann eine entscheidende Fähigkeit sein, wenn man mit tabellarischen Daten im Web zu tun hat. Websites zeigen oft wichtige Informationen wie Produktdetails, Preise, Lagerbestände und Finanzdaten in Tabellen an. Die Möglichkeit, diese Informationen zu extrahieren, ist äußerst nützlich bei der Erfassung von Daten für alle Arten von Analyseaufgaben. In diesem Artikel werden wir uns eingehend mit HTML-Tabellen befassen und ein einfaches, aber leistungsstarkes Programm erstellen, um Daten aus ihnen zu extrahieren und in eine CSV- oder JSON-Datei zu exportieren. Wir werden Node.js und Cheerio verwenden, um den Prozess zu einem Kinderspiel zu machen.

Die Struktur einer HTML-Tabelle verstehen

HTML tables are a powerful tool for marking up structured tabular data and displaying it in a way that is easy for users to read and understand. Tables are made up of data organized into rows and columns, and HTML provides several different elements for defining and structuring this data. A table must include at least the following elements: <table>, <tr> (table row), and <td> (table data). For added structure and semantic value, tables may also include the <th> (table header) element, as well as the <thead>, <tbody>, and <tfoot> elements.

Lassen Sie uns die Tags mit Hilfe eines kleinen Beispiels erkunden.

Beachten Sie, dass die zweite Tabelle eine spezifischere Syntax verwendet

The <thead> tag will apply a bold font to the "Fruit" and "Color" cells in the second table. Other than that, you can see how both syntaxes achieve the same organization of the data.

Wenn Sie Tabellen aus dem Internet auslesen, müssen Sie sich darüber im Klaren sein, dass Sie auf Tabellen stoßen können, die mit unterschiedlichem Grad an semantischer Spezifität geschrieben sind. Mit anderen Worten, einige Tabellen können detailliertere und beschreibende HTML-Tags enthalten, während andere eine einfachere und weniger beschreibende Syntax verwenden können.

Scraping von HTML-Tabellen mit Node.js und cheerio

Willkommen zum spaßigen Teil! Wir haben etwas über die Struktur und den Zweck von HTML-Tabellen gelernt, und jetzt ist es an der Zeit, dieses Wissen in die Tat umzusetzen, indem wir etwas Praktisches tun. Unser Ziel für diesen Lehrgang ist die Tabelle der meistverkauften Künstler aller Zeiten auf https://chartmasters.org/best-selling-artists-of-all-time/. Zunächst werden wir unsere Arbeitsumgebung einrichten und die erforderlichen Bibliotheken installieren. Dann erkunden wir unsere Ziel-Website und entwickeln einige Selektoren, um die Daten aus der Tabelle zu extrahieren. Danach schreiben wir den Code, um die Daten auszulesen, und schließlich exportieren wir sie in verschiedene Formate wie CSV und JSON.

Einrichten der Arbeitsumgebung

Also gut, fangen wir mit unserem brandneuen Projekt an! Bevor Sie beginnen, stellen Sie sicher, dass Sie node.js installiert haben. Sie können es von https://nodejs.org/en/ herunterladen.

Öffnen Sie nun Ihren bevorzugten Code-Editor, öffnen Sie Ihr Projektverzeichnis und führen Sie es (im Terminal) aus:

npm init -y

Dadurch wird ein neues Projekt initialisiert und eine standardmäßige package.json-Datei erstellt.

{

  "name": "html_table_scraper", // the name of your project folder

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "keywords": [],

  "author": "",

  "license": "ISC"

}

Um die Dinge einfach zu halten, werden wir unsere Module mit "require" importieren. Wenn Sie jedoch Module mit der Anweisung "import" importieren möchten, fügen Sie dies zu Ihrer package.json-Datei hinzu:

 "type": "module",

 // Dies ermöglicht Ihnen die Verwendung der Import-Anweisung 

 // z.B.: import * as cheerio from 'cheerio';

Die Option "main": "index.js" gibt den Namen der Datei an, die den Einstiegspunkt für unser Programm darstellt. Damit können Sie nun eine leere index.js-Datei erstellen.

Wir werden die cheerio-Bibliothek verwenden, um das HTML unserer Ziel-Website zu analysieren. Sie können sie mit installieren:

npm install cheerio

Öffnen Sie nun die Datei index.js und binden Sie sie als Modul ein:

const cheerio = require('cheerio');

Das grundlegende Arbeitsumfeld ist geschaffen. Im nächsten Kapitel werden wir die Struktur der Tabelle der umsatzstärksten Künstler aller Zeiten untersuchen.

Testen der Zielsite mit DevTools

Wenn wir die Registerkarte "Elemente" der Entwicklertools untersuchen, können wir wertvolle Informationen über die Struktur der Tabelle gewinnen:

The table is stored in a <thead>, <tbody> format.

Allen Tabellenelementen werden beschreibende IDs, Klassen und Rollen zugewiesen.

Im Kontext eines Browsers haben Sie direkten Zugriff auf den HTML-Code einer Webseite. Das heißt, Sie können JavaScript-Funktionen wie getElementsByTagName oder querySelector verwenden, um Daten aus dem HTML zu extrahieren.

In diesem Sinne können wir die Konsole der Entwicklertools verwenden, um einige Selektoren zu testen.

Extrahieren wir die Namen der Überschriften mit dem Attribut role="columnheader"

Extrahieren wir nun die Daten aus der ersten Zeile unter Verwendung der Attribute role="cell" und role="row":

Wie Sie sehen können:

Wir können "[role=columheader]" verwenden, um alle Kopfelemente auszuwählen.

Wir können "tbody [role=row]" verwenden, um alle Zeilenelemente auszuwählen.

Für jede Zeile können wir "[role=cell]" verwenden, um ihre Zellen auszuwählen.

Es ist zu beachten, dass die Zelle PIC ein Bild enthält und wir eine spezielle Regel schreiben sollten, um dessen URL zu extrahieren.

Implementieren eines HTML-Tabellen-Scrapers

Jetzt ist es an der Zeit, die Dinge mit Hilfe von Node.js und Cheerio ein wenig weiter zu entwickeln.

Um den HTML-Code einer Website in einem Node.js-Projekt abzurufen, müssen Sie eine Fetch-Anfrage an die Website stellen. Dabei wird der HTML-Code als String zurückgegeben, was bedeutet, dass Sie keine JavaScript-DOM-Funktionen verwenden können, um Daten zu extrahieren. An dieser Stelle kommt Cheerio ins Spiel. Cheerio ist eine Bibliothek, die es Ihnen ermöglicht, den HTML-String so zu analysieren und zu bearbeiten, als befänden Sie sich im Kontext eines Browsers. Das bedeutet, dass Sie vertraute CSS-Selektoren verwenden können, um Daten aus dem HTML-String zu extrahieren, so wie Sie es in einem Browser tun würden.

Es ist auch wichtig zu wissen, dass der von einer Fetch-Anfrage zurückgegebene HTML-Code anders sein kann als der, den Sie im Browser sehen. Das liegt daran, dass der Browser JavaScript ausführt, das das angezeigte HTML verändern kann. Bei einer Fetch-Anfrage erhalten Sie nur den Roh-HTML-Code, ohne jegliche JavaScript-Modifikationen.

Lassen Sie uns zu Testzwecken eine Fetch-Anfrage an unsere Ziel-Website stellen und den resultierenden HTML-Code in eine lokale Datei schreiben:

//index.js

const fs = require('fs');

(async () => {

    const response =  await fetch('https://chartmasters.org/best-selling-artists-of-all-time/');

    const raw_html = await response.text();

    fs.writeFileSync('raw-best-selling-artists-of-all-time.html', raw_html);

})();

// it will write the raw html to raw-best-selling-artists-of-all-time.html

// try it with other websites: https://randomwordgenerator.com/

Sie können es mit ausführen:

node index.js

Und du bekommst:

Die Tabellenstruktur bleibt gleich. Das bedeutet, dass die Selektoren, die wir im vorherigen Kapitel gefunden haben, immer noch relevant sind.

Ok, fahren wir nun mit dem eigentlichen Code fort:

Nachdem Sie die Fetch-Anfrage an https://chartmasters.org/best-selling-artists-of-all-time/ gestellt haben , müssen Sie die Roh-HTML-Daten in Cheerio laden:

const cheerio = require('cheerio');

(async () => {

    const response =  await fetch('https://chartmasters.org/best-selling-artists-of-all-time/');

    const raw_html = await response.text();

    const $ = cheerio.load(raw_html);

})();

Nachdem cheerio geladen ist, wollen wir sehen, wie wir die Kopfzeilen extrahieren können:

    const headers = $("[role=columnheader]")

 const header_names = []

 headers.each((index, el) => {

 header_names.push($(el).text())

 })

 //header_names

    [

        '#',

        'PIC',

        'Artist',

        'Total CSPC',

        'Studio Albums Sales',

        'Other LPs Sales',

        'Physical Singles Sales',

        'Digital Singles Sales',

        'Sales Update',

        'Streams EAS (Update)'

    ]

Und die erste Reihe:

    const first_row = $("tbody [role=row]")[0]

 const first_row_cells = $(first_row).find('[role=cell]')

 const first_row_data = []

 first_row_cells.each((index, f_r_c) => {

 const image = $(f_r_c).find('img').attr('src')

 if(image) {

 first_row_data.push(image)

 }

 else {

 first_row_data.push($(f_r_c).text())

 }

   })

   //first_row_data

     [

        '1',

        'https://i.scdn.co/image/ab6761610000f178e9348cc01ff5d55971b22433',

        'The Beatles',

        '421,300,000',

        '160,650,000',

        '203,392,000',

        '116,080,000',

        '35,230,000',

        '03/01/17',

        '17,150,000 (01/03/23)'

      ]

Erinnern Sie sich noch daran, wie wir die HTML-Tabelle mit JavaScript in der Konsole der Browser-Entwicklertools gekratzt haben? An dieser Stelle haben wir die gleiche Funktionalität, die wir dort implementiert haben, im Kontext des Node.js-Projekts nachgebaut. Sie können sich das letzte Kapitel ansehen und die vielen Ähnlichkeiten zwischen den beiden Implementierungen feststellen.

Lassen Sie uns den Code umschreiben, um alle Zeilen zu scrapen:

    const rows = $("tbody [role=row]")

 const rows_data = []

 rows.each((index, row) => {

 const row_cell_data = []

 const cells = $(row).find('[role=cell]')

 cells.each((index, cell) => {

 const image = $(cell).find('img').attr('src')

 if(image) {

 row_cell_data.push(image)

 }

 else {

 row_cell_data.push($(cell).text())

 }

       })

        rows_data.push(row_cell_data)

 })

   //rows_data

 [

 [

 '1',

 'https://i.scdn.co/image/ab6761610000f178e9348cc01ff5d55971b22433',

 'The Beatles',

 '421,300,000',

 '160,650,000',

 '203,392,000',

         '116.080.000',

 '35.230.000',

 '03/01/17',

 '17.150.000 (01/03/23)'

 ],

 [

 '2',

 'https://i.scdn.co/image/ab6761610000f178a2a0b9e3448c1e702de9dc90',

 'Michael Jackson',

 '336.084.000',

 '182.600.000',

 '101,997.000',

 '79.350.000',

 '79.930.000',

 '09/27/17',

 '15.692.000 (01/06/23)'

 ],

...

   ]

Nachdem wir nun die Daten erhalten haben, wollen wir sehen, wie wir sie exportieren können.

Exportieren der Daten

Nachdem Sie die Daten, die Sie abrufen möchten, erfolgreich erhalten haben, müssen Sie sich überlegen, wie Sie die Informationen speichern möchten. Die beliebtesten Optionen sind .json und .csv. Wählen Sie das Format, das Ihren spezifischen Bedürfnissen und Anforderungen am besten entspricht.

Exportieren der Daten in json

Wenn Sie die Daten in das .json-Format exportieren möchten, sollten Sie die Daten zunächst in einem JavaScript-Objekt bündeln, das dem .json-Format ähnelt.

Wir haben ein Array mit Kopfzeilennamen (header_names) und ein weiteres Array (rows_data, ein Array von Arrays), das die Zeilendaten enthält. Das .json-Format speichert Informationen in Schlüssel-Wert-Paaren. Wir müssen unsere Daten so bündeln, dass sie dieser Regel folgen:

[ // this is what we need to obtain

  {

    '#': '1',

    PIC: 'https://i.scdn.co/image/ab6761610000f178e9348cc01ff5d55971b22433',

    Artist: 'The Beatles',

    'Total CSPC': '421,300,000',

    'Studio Albums Sales': '160,650,000',

    'Other LPs Sales': '203,392,000',

    'Physical Singles Sales': '116,080,000',

    'Digital Singles Sales': '35,230,000',

    'Sales Update': '03/01/17',

    'Streams EAS (Update)': '17,150,000 (01/03/23)'

  },

  {

    '#': '2',

    PIC: 'https://i.scdn.co/image/ab6761610000f178a2a0b9e3448c1e702de9dc90',

    Artist: 'Michael Jackson',

    'Total CSPC': '336,084,000',

    'Studio Albums Sales': '182,600,000',

    'Other LPs Sales': '101,997,000',

    'Physical Singles Sales': '79,350,000',

    'Digital Singles Sales': '79,930,000',

    'Sales Update': '09/27/17',

    'Streams EAS (Update)': '15,692,000 (01/06/23)'

  } 

  ...

]

Wie Sie dies erreichen können, erfahren Sie hier:

     // go through each row

 const table_data = rows_data.map(row => {

        // create a new object

        const obj = {};

        // forEach element in header_names

        header_names.forEach((header_name, i) => {

          // add a key-value pair to the object where the key is the current header name and the value is the value at the same index in the row

          obj[header_name] = row[i];

        });

        // return the object

        return obj;

 });

Jetzt können Sie die Funktion JSON.stringify() verwenden, um das JavaScript-Objekt in eine .json-Zeichenkette umzuwandeln und sie in eine Datei zu schreiben.

 const fs = require('fs');

 const table_data_json_string = JSON.stringify(table_data, null, 2)

 fs.writeFile('table_data.json', table_data_json_string, (err) => {

if (err) throw err;

console.log('The file has been saved as table_data.json!');

 })

Exportieren der Daten nach csv

Das .csv-Format steht für "kommagetrennte Werte". Wenn Sie Ihre Tabelle im .csv-Format speichern möchten, müssen Sie sie in einem ähnlichen Format wie diesem verfassen:

id,name,age // die Tabellenköpfe gefolgt von den Zeilen

1,Alice,20

2,Bob,25

3,Charlie,30

Unsere Tabellendaten bestehen aus einem Array von Kopfzeilennamen (header_names) und einem weiteren Array (rows_data, ein Array von Arrays), das die Zeilendaten enthält. So können Sie diese Daten in eine .csv-Datei schreiben:

    let csv_string = header_names.join(',') + '\n'; // add the headers

    // forEach row in rows_data

    rows_data.forEach(row => {

      // add the row to the CSV string

      csv_string += row.join(',') + '\n';

    });

   

    // write the string to a file

    fs.writeFile('table_data.csv', csv_string, (err) => {

      if (err) throw err;

      console.log('The file has been saved as table_data.csv!');

    });

Vermeiden Sie eine Blockade

Haben Sie schon einmal versucht, eine Website zu scrapen und festgestellt, dass die Seite, aus der Sie Informationen extrahieren wollen, nicht vollständig geladen wird? Das kann frustrierend sein, vor allem wenn Sie wissen, dass die Website JavaScript verwendet, um ihren Inhalt zu generieren. Wir sind nicht in der Lage, JavaScript wie ein normaler Browser auszuführen, was zu unvollständigen Daten oder sogar zum Ausschluss von der Website führen kann, weil zu viele Anfragen in kurzer Zeit gestellt wurden.

Eine Lösung für dieses Problem ist WebScrapingApi. Mit unserem Dienst können Sie einfach Anfragen an unsere API stellen, die alle komplexen Aufgaben für Sie übernimmt. Er führt JavaScript aus, rotiert Proxys und verarbeitet sogar CAPTCHAs.

Here is how you can make a simple fetch request to a <target_url> and write the response to a file:

const fs = require('fs');

(async () => {

    const result = await fetch('https://api.webscrapingapi.com/v1?' + new URLSearchParams({

        api_key: '<api_key>',

        url: '<target_url>',

        render_js: 1,

        proxy_type: 'residential',

    }))

   

    const html = await result.text();

    fs.writeFileSync('wsa_test.html', html);

})();

Sie können einen kostenlosen API_KEY erhalten, indem Sie ein neues Konto auf https://www.webscrapingapi.com/ erstellen.

Durch die Angabe des Parameters render_js=1 aktivieren Sie die Fähigkeit von WebScrapingAPI, mit einem Headless-Browser auf die Zielseite zuzugreifen, wodurch JavaScript-Seitenelemente gerendert werden können, bevor das endgültige Scraping-Ergebnis an Sie zurückgegeben wird.

Besuchen Sie https://docs.webscrapingapi.com/webscrapingapi/advanced-api-features/proxies, um die Möglichkeiten unserer rotierenden Proxys zu entdecken.

Schlussfolgerung

In diesem Artikel lernten wir die Möglichkeiten des Web Scraping von HTML-Tabellen mit JavaScript kennen und erfuhren, wie wir damit wertvolle Daten aus Websites extrahieren können. Wir haben die Struktur von HTML-Tabellen erforscht und gelernt, wie man die Cheerio-Bibliothek in Kombination mit Node.js verwendet, um auf einfache Weise Daten aus ihnen zu scrapen. Außerdem haben wir uns verschiedene Möglichkeiten zum Exportieren der Daten angesehen, darunter CSV- und JSON-Formate. Wenn Sie die in diesem Artikel beschriebenen Schritte befolgen, sollten Sie jetzt eine solide Grundlage für das Scrapen von HTML-Tabellen auf jeder Website haben.

Egal, ob Sie ein erfahrener Profi sind oder gerade mit Ihrem ersten Scraping-Projekt beginnen, WebScrapingAPI's ist hier, um Ihnen bei jedem Schritt zu helfen. Unser Team steht Ihnen jederzeit gerne zur Verfügung, um Ihre Fragen zu beantworten und Sie bei Ihren Projekten zu unterstützen. Wenn Sie also einmal nicht weiterkommen oder einfach nur eine helfende Hand brauchen, zögern Sie nicht, sich an uns zu wenden.