Introduzione al web scraping in JavaScript

Il web scraping è una delle cose più interessanti nel mondo del coding.

Che cos’è il web scraping?

Perché esiste?

Scopriamo le risposte.

Che cos’è il web scraping?

Il web scraping è un’attività automatizzata per estrarre dati dai siti web.

Esistono molte applicazioni di web scraping. Estrarre i prezzi dei prodotti e confrontarli con diverse piattaforme di e-commerce. Ottenere un preventivo giornaliero dal web. Costruire il proprio motore di ricerca come Google, Yahoo, ecc., L’elenco potrebbe continuare.

Puoi fare più di quanto pensi con il web scraping. Una volta che sai come estrarre i dati dai siti Web, puoi fare quello che vuoi con i dati.

Il programma che estrae i dati dai siti web è chiamato web scraper. Imparerai a scrivere web scraper in JavaScript.

Ci sono principalmente due parti nel web scraping.

  • Ottenere i dati utilizzando librerie di richiesta e un browser headless.
  • Analizzare i dati per estrarre le informazioni esatte che vogliamo dai dati.

Senza ulteriori indugi, iniziamo.

Installazione del progetto

Presumo che tu abbia installato Node, in caso contrario controlla la guida all’installazione di NodeJS.

Utilizzeremo i pacchetti node-fetch e cheerio per il web scraping in JavaScript. Impostiamo il progetto con npm in modo che funzioni con un pacchetto di terze parti.

Vediamo rapidamente i passaggi per completare la nostra configurazione.

  • Crea una directory chiamata web_scraping e accedi ad essa.
  • Eseguire il comando npm init per inizializzare il progetto.
  • Rispondi a tutte le domande in base alle tue preferenze.
  • Ora installa i pacchetti usando il comando
npm install node-fetch cheerio

Vediamo gli scorci dei pacchetti installati.

recupero del nodo

Il pacchetto node-fetch porta window.fetch nell’ambiente node js. Aiuta a fare le richieste HTTP e ottenere i dati grezzi.

ciao

Il pacchetto ciao viene utilizzato per analizzare ed estrarre le informazioni necessarie dai dati grezzi.

Due pacchetti node-fetch e cheerio sono abbastanza buoni per il web scraping in JavaScript. Non vedremo tutti i metodi forniti dai pacchetti. Vedremo il flusso del web scraping e i metodi più utili in quel flusso.

Imparerai il web scraping facendolo. Quindi, mettiamoci al lavoro.

Raschiando la lista della Coppa del mondo di cricket

Qui in questa sezione, faremo un vero e proprio web scraping.

Cosa stiamo estraendo?

Dal titolo della sezione, penso che lo indovineresti facilmente. Sì, qualunque cosa tu stia pensando è corretta. Estraiamo tutti i vincitori e i secondi classificati della coppa del mondo di cricket fino ad ora.

  • Crea un file chiamato extract_cricket_world_cups_list.js nel progetto.
  • Useremo il Wikipedia Coppa del mondo di cricket pagina per ottenere le informazioni desiderate.
  • Innanzitutto, ottieni i dati grezzi utilizzando il pacchetto node-fetch.
  • Il codice sottostante ottiene i dati grezzi della pagina di Wikipedia sopra.
const fetch = require("node-fetch");

// function to get the raw data
const getRawData = (URL) => {
   return fetch(URL)
      .then((response) => response.text())
      .then((data) => {
         return data;
      });
};

// URL for data
const URL = "https://en.wikipedia.org/wiki/Cricket_World_Cup";

// start of the program
const getCricketWorldCupsList = async () => {
   const cricketWorldCupRawData = await getRawData(URL);
   console.log(cricketWorldCupRawData);
};

// invoking the main function
getCricketWorldCupsList();

Abbiamo ottenuto i dati grezzi dall’URL. Ora è il momento di estrarre le informazioni di cui abbiamo bisogno dai dati grezzi. Usiamo il pacchetto cheerio per estrarre i dati.

L’estrazione di dati che coinvolgono tag HTML con cheerio è un gioco da ragazzi. Prima di entrare nei dati effettivi, vediamo alcuni esempi di analisi dei dati utilizzando cheerio.

  • Analizza i dati HTML utilizzando il metodo cheerio.load.
const parsedSampleData = cheerio.load(
      `<div id="container"><p id="title">I'm title</p></div>`
   );
  • Abbiamo analizzato il codice HTML sopra. Come estrarre il contenuto del tag p da esso? È lo stesso dei selettori nella manipolazione del DOM JavaScript.

console.log(parsedSampleData(“#title”).text());

Puoi selezionare i tag come desideri. Puoi controllare diversi metodi da sito ufficiale cheerio.

  • Ora è il momento di estrarre la lista dei mondiali. Per estrarre le informazioni, abbiamo bisogno di conoscere i tag HTML che le informazioni si trovano sulla pagina. Vai al pagina Wikipedia della coppa del mondo di cricket e ispeziona la pagina per ottenere informazioni sui tag HTML.

Ecco il codice completo.

const fetch = require("node-fetch");
const cheerio = require("cheerio");

// function to get the raw data
const getRawData = (URL) => {
   return fetch(URL)
      .then((response) => response.text())
      .then((data) => {
         return data;
      });
};

// URL for data
const URL = "https://en.wikipedia.org/wiki/Cricket_World_Cup";

// start of the program
const getCricketWorldCupsList = async () => {
   const cricketWorldCupRawData = await getRawData(URL);

   // parsing the data
   const parsedCricketWorldCupData = cheerio.load(cricketWorldCupRawData);

   // extracting the table data
   const worldCupsDataTable = parsedCricketWorldCupData("table.wikitable")[0]
      .children[1].children;

   console.log("Year --- Winner --- Runner");
   worldCupsDataTable.forEach((row) => {
      // extracting `td` tags
      if (row.name === "tr") {
         let year = null,
            winner = null,
            runner = null;

         const columns = row.children.filter((column) => column.name === "td");

         // extracting year
         const yearColumn = columns[0];
         if (yearColumn) {
            year = yearColumn.children[0];
            if (year) {
               year = year.children[0].data;
            }
         }

         // extracting winner
         const winnerColumn = columns[3];
         if (winnerColumn) {
            winner = winnerColumn.children[1];
            if (winner) {
               winner = winner.children[0].data;
            }
         }

         // extracting runner
         const runnerColumn = columns[5];
         if (runnerColumn) {
            runner = runnerColumn.children[1];
            if (runner) {
               runner = runner.children[0].data;
            }
         }

         if (year && winner && runner) {
            console.log(`${year} --- ${winner} --- ${runner}`);
         }
      }
   });
};

// invoking the main function
getCricketWorldCupsList();

Ed ecco i dati raschiati.

Year --- Winner --- Runner
1975 --- West Indies --- Australia
1979 --- West Indies --- England
1983 --- India --- West Indies
1987 --- Australia --- England
1992 --- Pakistan --- England
1996 --- Sri Lanka --- Australia
1999 --- Australia --- Pakistan
2003 --- Australia --- India
2007 --- Australia --- Sri Lanka
2011 --- India --- Sri Lanka
2015 --- Australia --- New Zealand
2019 --- England --- New Zealand

Fantastico 😎, vero?

Modello di raschiatura

Ottenere i dati grezzi dall’URL è comune in ogni progetto di web scraping. L’unica parte che cambia è l’estrazione dei dati secondo il requisito. Puoi provare il codice seguente come modello.

const fetch = require("node-fetch");
const cheerio = require("cheerio");
const fs = require("fs");
// function to get the raw data
const getRawData = (URL) => {
   return fetch(URL)
      .then((response) => response.text())
      .then((data) => {
         return data;
      });
};
// URL for data
const URL = "https://example.com/";
// start of the program
const scrapeData = async () => {
   const rawData = await getRawData(URL);
   // parsing the data
   const parsedData = cheerio.load(rawData);
   console.log(parsedData);
   // write code to extract the data
   // here
   // ...
   // ...
};
// invoking the main function
scrapeData();

Conclusione

Hai imparato a raschiare una pagina web. Ora tocca a te esercitarti con la programmazione.

Suggerirei anche di controllare i popolari framework di web scraping per esplorare e soluzioni di web scraping basate su cloud.

Buona programmazione 🙂

Ti è piaciuto leggere l’articolo? Che ne dici di condividere con il mondo?