Comment récupérer un tableau HTML en JavaScript

Mihai Maxim le 31 janvier 2023

Savoir comment récupérer des tableaux HTML à l'aide de javascript peut s'avérer crucial lorsqu'il s'agit de données tabulaires affichées sur le web. Les sites web affichent souvent des informations importantes, telles que les détails des produits, les prix, les niveaux de stock et les données financières dans des tableaux. La possibilité d'extraire ces informations est extrêmement utile pour collecter des données en vue de toutes sortes d'analyses. Dans cet article, nous allons approfondir les tableaux HTML et construire un programme simple mais puissant pour en extraire des données et les exporter vers un fichier CSV ou JSON. Nous utiliserons Node.js et cheerio pour faciliter le processus.

Comprendre la structure d'un tableau HTML

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.

Explorons les balises à l'aide d'un petit exemple.

Remarquez que le deuxième tableau utilise une syntaxe plus spécifique

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.

Lorsque vous récupérez des tableaux sur le web, il est important de savoir que vous pouvez rencontrer des tableaux qui sont écrits avec différents degrés de spécificité sémantique. En d'autres termes, certains tableaux peuvent inclure des balises HTML plus détaillées et descriptives, tandis que d'autres peuvent utiliser une syntaxe plus simple et moins descriptive.

Scraping HTML Tables avec Node.js et cheerio

Bienvenue dans la partie amusante ! Nous avons appris la structure et le but des tableaux HTML, et il est maintenant temps de mettre ces connaissances en pratique en faisant quelque chose de concret. Notre objectif pour ce tutoriel est le tableau des artistes les plus vendus de tous les temps que l'on trouve sur https://chartmasters.org/best-selling-artists-of-all-time/. Nous commencerons par configurer notre environnement de travail et par installer les bibliothèques nécessaires. Ensuite, nous explorerons notre site web cible et trouverons des sélecteurs pour extraire les données du tableau. Ensuite, nous écrirons le code pour extraire les données et enfin, nous les exporterons dans différents formats tels que CSV et JSON.

Mise en place de l'environnement de travail

Très bien, commençons par notre tout nouveau projet ! Avant de commencer, assurez-vous que node.js est installé. Vous pouvez le télécharger sur https://nodejs.org/en/.

Maintenant, ouvrez votre éditeur de code favori, ouvrez votre répertoire de projet, et exécutez (dans le terminal) :

npm init -y

Ceci initialisera un nouveau projet et créera un fichier package.json par défaut.

{

  "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"

}

Pour garder les choses simples, nous importerons nos modules avec "require". Mais si vous souhaitez importer des modules en utilisant l'instruction "import", ajoutez ceci à votre fichier package.json :

 "type" : "module",

 // cela vous permettra d'utiliser la déclaration d'importation 

 // ex : import * as cheerio from 'cheerio' ;

L'option "main" : "index.js" spécifie le nom du fichier qui est le point d'entrée de notre programme. Ceci étant dit, vous pouvez maintenant créer un fichier index.js vide.

Nous allons utiliser la bibliothèque cheerio pour analyser le code HTML de notre site web cible. Vous pouvez l'installer avec :

npm install cheerio

Ouvrez maintenant le fichier index.js et incluez-le en tant que module :

const cheerio = require('cheerio') ;

L'environnement de travail de base est défini. Dans le prochain chapitre, nous étudierons la structure du tableau des artistes les plus vendus de tous les temps.

Test du site cible à l'aide de DevTools

En inspectant l'onglet "Éléments" des outils de développement, nous pouvons extraire des informations précieuses sur la structure du tableau :

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

Tous les éléments du tableau se voient attribuer des identifiants, des classes et des rôles descriptifs.

Dans le contexte d'un navigateur, vous avez un accès direct au code HTML d'une page web. Cela signifie que vous pouvez utiliser des fonctions JavaScript telles que getElementsByTagName ou querySelector pour extraire des données du code HTML.

Dans cette optique, nous pouvons utiliser la console des outils de développement pour tester certains sélecteurs.

Extrayons les noms des en-têtes en utilisant l'attribut role="columnheader".

Extrayons maintenant les données de la première ligne à l'aide des attributs role="cell" et role="row" :

Comme vous pouvez le constater :

Nous pouvons utiliser "[role=columheader]" pour sélectionner tous les éléments de l'en-tête.

Nous pouvons utiliser "tbody [role=row]" pour sélectionner tous les éléments de la ligne.

Pour chaque ligne, nous pouvons utiliser "[role=cell]" pour sélectionner ses cellules.

Une chose à noter est que la cellule PIC contient une image et que nous devons écrire une règle spéciale pour extraire son URL.

Mise en œuvre d'un scraper de tableaux HTML

Il est maintenant temps de rendre les choses un peu plus avancées en utilisant Node.js et cheerio.

Pour obtenir le code HTML d'un site web dans un projet Node.js, vous devez envoyer une requête fetch au site. Cette requête renvoie le code HTML sous forme de chaîne de caractères, ce qui signifie que vous ne pouvez pas utiliser les fonctions DOM de JavaScript pour extraire les données. C'est là que cheerio entre en jeu. Cheerio est une bibliothèque qui vous permet d'analyser et de manipuler la chaîne HTML comme si vous étiez dans le contexte d'un navigateur. Cela signifie que vous pouvez utiliser des sélecteurs CSS familiers pour extraire des données du HTML, comme vous le feriez dans un navigateur.

Il est également important de noter que le code HTML renvoyé par une requête de récupération peut être différent du code HTML que vous voyez dans le navigateur. En effet, le navigateur exécute du JavaScript, qui peut modifier le code HTML affiché. Dans une requête fetch, vous obtenez simplement le HTML brut, sans aucune modification JavaScript.

À des fins de test, effectuons une requête de récupération sur notre site web cible et écrivons le code HTML résultant dans un fichier local :

//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/

Vous pouvez le faire fonctionner avec :

node index.js

Et vous obtiendrez :

La structure du tableau reste la même. Cela signifie que les sélecteurs que nous avons trouvés dans le chapitre précédent sont toujours pertinents.

Ok, poursuivons maintenant avec le code proprement dit :

Après avoir envoyé une requête à https://chartmasters.org/best-selling-artists-of-all-time/, vous devrez charger le code HTML brut dans cheerio :

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);

})();

Avec cheerio chargé, voyons comment nous pouvons extraire les en-têtes :

    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)'

    ]

Et la première ligne :

    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)'

      ]

Vous vous souvenez lorsque nous avons récupéré le tableau HTML avec JavaScript dans la console Browser Developer Tools ? À ce stade, nous avons reproduit la même fonctionnalité que celle que nous avons mise en œuvre, mais dans le contexte du projet Node.js. Vous pouvez revoir le dernier chapitre et observer les nombreuses similitudes entre les deux implémentations.

Pour aller plus loin, réécrivons le code pour récupérer toutes les lignes :

    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)'

 ],

...

   ]

Maintenant que nous avons obtenu les données, voyons comment les exporter.

Exporter les données

Une fois que vous avez obtenu les données que vous souhaitez récupérer, il est important de réfléchir à la manière dont vous souhaitez stocker les informations. Les options les plus populaires sont .json et .csv. Choisissez le format qui répond le mieux à vos besoins et exigences spécifiques.

Exporter les données au format json

Si vous souhaitez exporter les données au format .json, vous devez d'abord regrouper les données dans un objet JavaScript qui ressemble au format .json.

Nous avons un tableau de noms d'en-têtes (header_names) et un autre tableau (rows_data, un tableau de tableaux) qui contient les données des lignes. Le format .json stocke les informations dans des paires clé-valeur. Nous devons regrouper nos données de manière à ce qu'elles respectent cette règle :

[ // 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)'

  } 

  ...

]

Voici comment y parvenir :

     // 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;

 });

Vous pouvez maintenant utiliser la fonction JSON.stringify() pour convertir l'objet JavaScript en une chaîne .json et l'écrire dans un fichier.

 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!');

 })

Exporter les données au format csv

Le format .csv signifie "comma separated values" (valeurs séparées par des virgules). Si vous souhaitez enregistrer votre tableau au format .csv, vous devez l'écrire dans un format similaire à celui-ci :

id,name,age // les en-têtes du tableau suivis des lignes

1,Alice,20

2,Bob,25

3,Charlie,30

Les données de notre tableau se composent d'un tableau de noms d'en-tête (header_names) et d'un autre tableau (rows_data, un tableau de tableaux) qui contient les données des lignes. Voici comment écrire ces données dans un fichier .csv :

    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!');

    });

Éviter les blocages

Vous est-il déjà arrivé, alors que vous essayez de récupérer un site web, de vous rendre compte que la page dont vous essayez d'extraire des informations ne se chargeait pas complètement ? Cela peut être frustrant, surtout si vous savez que le site web utilise JavaScript pour générer son contenu. Nous n'avons pas la capacité d'exécuter JavaScript comme le fait un navigateur ordinaire, ce qui peut conduire à des données incomplètes ou même à être banni du site web pour avoir fait trop de requêtes dans un court laps de temps.

Une solution à ce problème est WebScrapingApi. Avec notre service, vous pouvez simplement faire des requêtes à notre API et elle s'occupera de toutes les tâches complexes pour vous. Il exécutera le JavaScript, fera tourner les proxies et gérera même les CAPTCHA.

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);

})();

Vous pouvez obtenir une clé API gratuite en créant un nouveau compte à l'adresse https://www.webscrapingapi.com/.

En spécifiant le paramètre render_js=1, vous activez la capacité de WebScrapingAPI à accéder à la page web ciblée à l'aide d'un navigateur sans tête qui permet aux éléments JavaScript de la page d'être rendus avant de vous renvoyer le résultat final du scraping.

Consultez le site https://docs.webscrapingapi.com/webscrapingapi/advanced-api-features/proxies pour découvrir les capacités de nos proxys rotatifs.

Conclusion

Dans cet article, nous avons découvert la puissance du web scraping de tableaux HTML avec JavaScript et comment il peut nous aider à extraire des données précieuses des sites web. Nous avons exploré la structure des tableaux HTML et appris à utiliser la bibliothèque cheerio en combinaison avec Node.js pour extraire facilement des données de ces tableaux. Nous avons également étudié les différentes façons d'exporter les données, y compris les formats CSV et JSON. En suivant les étapes décrites dans cet article, vous devriez maintenant avoir une base solide pour récupérer des tableaux HTML sur n'importe quel site web.

Que vous soyez un professionnel chevronné ou que vous vous lanciez dans votre premier projet de scraping, WebScrapingAPI's est là pour vous aider à chaque étape. Notre équipe est toujours heureuse de répondre à vos questions et de vous guider dans vos projets. Si vous vous sentez bloqué ou si vous avez besoin d'un coup de main, n'hésitez pas à nous contacter.