Comment extraire rapidement tous les liens d'une page web avec Javascript ?

Sommaire
Comment extraire rapidement tous les liens d'une page web avec Javascript ?

Résumé de cette méthode de collecte de données avec Javascript

Qu'est-ce que le Web Scraping ?

Le web scraping est un terme désignant diverses méthodes utilisées pour collecter des informations sur le web.

En général, cette opération est effectuée à l'aide d'outils ou de codes qui simulent la navigation humaine sur le Web afin de recueillir des éléments d'information spécifiques sur différents sites Web.

Ces informations sont collectées et ensuite exportées dans des formats plus utiles pour les utilisateurs : qu'il s'agisse d'un tableur (XLS, CSV, etc..) ou d'une API.

LIRE PLUS : Qu'est-ce que le Web Scraping ? -->

Le Web Scraping est-il légal ?

Cette réponse n'est pas si simple qu'elle n'en paraît, c'est avant tout une question d'éthique.

Selon les cas, vous pourriez vous retrouver ou non dans la légalité. Vous devriez être attentif aux :

  • des types de données,
  • de leur utilisation,
  • mais encore de la méthode de collecte par le biais de langages de programmation (ou d'outils de web scraping).
LIRE PLUS : Le Web Scraping est-il légal ? -->

Qu'est-ce que le Javascript ? 

JavaScript est un langage de programmation textuel utilisé à la fois du côté client et du côté serveur. 

Il permet de rendre les pages Web dynamiques (contrairement à HTML et CSS, qui donnent principalement la structure et le style des pages Web)

Pour résumer brièvement, JavaScript ajoute du comportement aux pages Web : de notre côté nous allons l'utiliser pour collecter dynamiquement les données d'une page web en quelques secondes car à sa bibliothèques de fonctions. 

Qu'avez-vous besoin pour ce projet ? 

web browser
source image : PCMAG
  • Littéralement n'importe quel navigateur fabriqué au cours des 10 dernières années.
  • Le bout de code que je vais fournir plus bas sur la page.

Utilisez quelques lignes de JavaScript pour extraire tous les liens d'une page Web, sans avoir à coder

Quel est le principe de collecte des liens d'une page Web avec Javascript

L'extraction et le nettoyage de données à partir de sites web et de documents sont des tâches quotidiennes. 

J'aime apprendre à extraire systématiquement des données de plusieurs pages web et même de plusieurs sites web à l'aide de Python et ou d'outils de Web Scraping.

Mais parfois, un projet ne nécessite qu'une petite quantité de données, provenant d'une seule page d'un site web. Auparavant, lorsqu'un cas comme celui-ci se présentait, je lançais toujours mon Interface de développement, j'écrivais et j'exécutais un script pour extraire ces informations. Cela revient à utiliser une masse pour casser une noix.

Le bon vieux JavaScript est suffisamment puissant pour extraire les informations d'une seule page web. 

Ce code JavaScript en question peut être exécuté dans la console de développement du navigateur en quelques secondes.

Dans cet exemple, j'extrais tous les liens d'une page Web, car c'est une tâche que beaucoup comme moi effectuent régulièrement sur les pages Web.

Cependant, ce code fonctionnerait tout aussi bien pour extraire tout autre type d'élément dans les documents HTML, moyennant quelques petites modifications.

Lorsque ce code s'exécute, il ouvre un nouvel onglet dans le navigateur et créer un tableau contenant le texte de chaque hyperlien et le lien lui-même. 

Le code et son fonctionnement

Ouvrez votre navigateur et accédez à la page dont vous souhaitez extraire les liens

Se rendre sur la page cible

Dans notre cas, nous utiliserons la page de Blog de ce site web comme exemple. - il s'agit d'une page contenant une quantité importante de liens.

Il ne nous reste plus qu'à ouvrir la console du développeur et à exécuter le code.

Ouvrir la console du navigateur

Pour ouvrir la console du développeur, vous pouvez faire un clique droit avec votre souris sur la page et sélectionner "Inspecter" ou "Inspecter l'élément" :

Une fois réalisé, vous devriez vous apparaître dans votre navigateur (en bas ou sur le côté), le code HTML de la page. Pas d'inquiétude à ce stade là, même si vous ne comprenez rien à ce qui s'affiche sur l'écran ce n'est pas grave.

Code source de la page

Exécuter le code dans la console du navigateur

Cliquez maintenant sur l'onglet Console ici entourée en rouge pour faire apparaître comme son nom l'indique la console du navigateur. 

Console du Navigateur
Console du Navigateur

Une fois sur la Console il se peut qu'elle ne soit pas vide et qu'il y ait pleins de choses écrits. Une fois de plus, ne vous inquiétez pas, vous avez la possibilité de la vider en effaçant l'historique afin de démarrer sur une belle section "propre".

Pour effacer le contenu de la console, faites un clique droit et effacer l'historique (ou "Clear History" en Anglais)

Effacer le contenu de la console
Effacer le contenu de la console

À partir de maintenant vous êtes presque arrivé au bout de la méthode. 

Vous allez copier l'extrait de code ci-dessous dans votre console. 

Code Javascript

Le voici au format texte pour faciliter le copier/coller.

var x = document.querySelectorAll("a");
var myarray = []
for (var i=0; i<x.length; i++){
var nametext = x[i].textContent;
var cleantext = nametext.replace(/\s+/g, ' ').trim();
var cleanlink = x[i].href;
myarray.push([cleantext,cleanlink]);
};
function make_table() {
   var table = '<table><thead><th>Name</th><th>Links</th></thead><tbody>';
  for (var i=0; i<myarray.length; i++) {
           table += '<tr><td>'+ myarray[i][0] + '</td><td>'+myarray[i][1]+'</td></tr>';
   };

   var w = window.open("");
w.document.write(table);
}
make_table()

Comme dans l'exemple ci-dessous, vous n'avez qu'à placer le bout de code dans la console. 

Collez le code dans la console
Collez le code dans la console

Récupérer le résultat du code Javascript

Cette dernière étape est la plus simple. Il suffit ensuite d'appuyer sur la touche Entrée.

Appuyez sur Entrée
Appuyez sur Entrée

Cela ouvrira un nouvel onglet dans votre navigateur avec un tableau contenant tous les textes de liens et les hyperliens de la page Web que vous avez choisie.

Résultat du collecteur de liens en javascript
Résultat du collecteur de liens en javascript

Ce tableau peut ensuite être copié et collé dans une feuille de calcul ou un document pour être utilisé à votre guise.

Que fait ce code Javascript pas à pas pour collecter les données du Web ?

Voici une décomposition du code et ce que fait chaque aspect.

Étapes de ce code (1/3)

Ici, nous trouvons tous les éléments "a" de la page (les éléments a sont des liens) et nous les assignons à la variable x. Ensuite, nous créons une variable tableau, mais nous la laissons vide pour l'instant.

Détails du code Javascript (1/3)
Détails du code Javascript (1/3)

Étapes de ce code (2/3)

Nous bouclons ensuite sur tous les éléments "a" de x, et pour chaque élément, nous essayons de trouver le contenu textuel de l'élément et le lien.

Pour le contenu textuel, nous remplaçons les espaces blancs par des espaces simples et nous coupons le texte, car il peut y avoir de grandes quantités d'espaces blancs qui rendraient notre tableau illisible.

Détails du code Javascript (2/3)
Détails du code Javascript (2/3)

Étapes de ce code (3/3)

  1. Nous créons ensuite le tableau à l'aide de la fonction "make_table()".
  2. Cette fonction crée une variable, table, avec le début d'un tableau HTML et les en-têtes du tableau.
  3. Nous utilisons ensuite une boucle "for" pour ajouter les lignes du tableau contenant le texte du lien et les hyperliens.
  4. Puis nous ouvrons ensuite une nouvelle fenêtre en utilisant "window.open()" et écrivons le tableau HTML dans cette fenêtre en utilisant "document.write()".

Détails du code Javascript (3/3)
Détails du code Javascript (3/3)

Inconvénients de ce code Javascript pour collecter des données sur le Web

Il y a un inconvénient au code actuel - il prendra TOUS les liens sur une page. Cela signifie tous les liens dans les menus, tous les liens internes qui vous amènent à d'autres pages du sites web. 

Vous pourriez être plus spécifique et rechercher tous les éléments "a" dans certaines zones de la page Web. Dans le cas de la page actuelle, il suffit de modifier la première ligne de code pour que le querySelector examine une zone ciblée de la page.

Pour ce faire, cliquez avec le bouton droit de la souris sur la zone de la page dont vous souhaitez retirer les liens et cliquez sur "Inspector".

Nous pouvons simplement modifier la première ligne pour rechercher tous les éléments "a" dans l'élément avec la classe "nom de la classe" :

var x = document.querySelectorAll(".nom de la classe a") ;

Quoi utiliser au quotidien pour faire du Web Scraping

Pour aller rapidement, ce type de code utile, Javascript est très utile. 

Si vous avez de compétences en développement

Néanmoins, j'utilise principalement à utiliser Python dans la grande majorité de mes activités de Web Scraping, mais il est utile d'avoir un moyen rapide et facile d'extraire des informations d'une page web sans avoir besoin d'ouvrir d'autres applications que le navigateur. 

LIRE PLUS : Comment collecter des données sur le Web avec Python ? -->

Si vous n'avez pas de compétences en développement

1) Utilisez des outils de Web Scraping

De nombreux outils sont très pratiques pour extraire des données du web.

De plus généralement, les données sont facilement exportables sous forme de tableurs  (XLS, CSV, etc..) ou d'une API.

Bien que le Web Scraping  puisse être effectué à la main (en faisant des copier-coller), dans la plupart des cas, ce"s outils sont moins coûteux, sans erreurs humaines et permettent de collecter des volumes de données importants.

LIRE PLUS : Liste d'outils pour extraire des données du Web en 2022   -->

2) Apprenez le développement

Quand je parle ici d'apprendre le développement, cela ne signifie pas devenir forcément un expert mais de savoir comprendre au moins un code, le remanier ou l'écrire en partie si besoin. 

Pour cela des formations pour tous les budgets sont disponibles sur Udemy 👇

Je suis moi-même au moins 1 formation par mois pour me tenir informé et monter en compétences sur de nombreux domaines. 

Bonne formation et bon web scraping à vous. !

A Propos de l'Auteur ✍🏻
Comment extraire rapidement tous les liens d'une page web avec Javascript ?

Je suis le fondateur de sales-hacking.com. 
Depuis de nombreuses années, j'aide les dirigeants d'entreprise, responsable marketing et commerciaux à dépasser leurs objectifs. 
Dans ce blog je vous explique en quoi ce que sont les dernières techniques et stratégies de croissance
Suivez-moi pendant que j'explore et expose les stratégies et tactiques de croissance méconnues qui changeront votre façon de penser le business dans votre entreprise. 

signature
Découvrez Gratuitement 👇
Sommaire
Partenaire promotionnel
Autres Articles
Contenus associés

D'autres lectures sont disponibles pour décortiquer tous les sujets au coeur des innovations stratégiques, technologiques et méthodologiques.

Ils parlent de nous

trends logo
digimedia logo
techcrunch logo
Jon logo
growth hackers logo
medium logo
trends logo
trends logo

Tout le nécessaire pour construire le business de vos rêves

icon growth meeting
Les Astuces de Croissance

Consultez cette liste de nombreux Growth Hacks étoffées chaque jour.
Inspirez-vous et booster votre croissance.

LES GROWTH HACKS
icon growth blog
Les Ressources  pour Entrepreneurs

Ne cherchez plus les modèles pour piloter et booster votre croissance. Tout le contenu est là pour vous, en libre service, gratuitement.

TÉLÉCHARGEMENTS