Komma igång med Web Scraping i JavaScript

Webbskrapning är en av de mest intressanta sakerna i kodningsvärlden.

Vad är webbskrapning?

Varför finns det ens?

Låt oss ta reda på svaren.

Vad är webbskrapning?

Webbskrapning är en automatisk uppgift för att extrahera data från webbplatser.

Det finns många applikationer för webbskrapning. Extrahera priserna på produkter och jämföra dem med olika e-handelsplattformar. Få en daglig offert från webben. Att bygga din egen sökmotor som Google, Yahoo, etc.. Listan fortsätter.

Du kan göra mer än du tror med webbskrapning. När du väl lärt dig hur du extraherar data från webbplatser kan du göra vad du vill med datan.

Programmet som extraherar data från webbplatser kallas en webbskrapa. Du ska lära dig att skriva webbskrapor i JavaScript.

Det finns huvudsakligen två delar till webbskrapning.

  • Hämta data med hjälp av begärandebibliotek och en huvudlös webbläsare.
  • Analysera data för att extrahera den exakta information som vi vill ha från data.

Låt oss utan vidare sätta igång.

Projektuppställning

Jag antar att du har Node installerad, om inte, kolla in installationsguiden för NodeJS.

Vi kommer att använda paketen node-fetch och cheerio för webbskrapning i JavaScript. Låt oss ställa in projektet med npm för att arbeta med ett tredjepartspaket.

Låt oss snabbt se stegen för att slutföra vår installation.

  • Skapa en katalog som heter web_scraping och navigera till den.
  • Kör kommandot npm init för att initiera projektet.
  • Svara på alla frågor utifrån dina önskemål.
  • Installera nu paketen med kommandot
npm install node-fetch cheerio

Låt oss se glimtarna av de installerade paketen.

nodhämtning

Paketet node-fetch tar med window.fetch till node js-miljön. Det hjälper till att göra HTTP-förfrågningar och få rådata.

cheerio

Förpackningen cheerio används för att analysera och extrahera den information som är nödvändig från rådata.

Två paket node-fetch och cheerio är tillräckligt bra för webbskrapning i JavaScript. Vi kommer inte att se alla metoder som paketen tillhandahåller. Vi kommer att se flödet av webbskrapning och de mest användbara metoderna i det flödet.

Du kommer att lära dig webbskrapning genom att göra det. Så, låt oss gå till arbetet.

Scraping Cricket World Cup List

Här i det här avsnittet ska vi göra faktisk webbskrapning.

Vad utvinner vi?

Med rubriken på avsnittet tror jag att du lätt skulle gissa det. Ja, vad du än tänker är korrekt. Låt oss extrahera alla cricketvärldscupvinnare och tvåa fram till nu.

  • Skapa en fil som heter extract_cricket_world_cups_list.js i projektet.
  • Vi kommer att använda Wikipedia Cricket World Cup sida för att få önskad information.
  • Skaffa först rådata med hjälp av node-fetch-paketet.
  • Nedanstående kod hämtar rådata från ovanstående Wikipedia-sida.
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();

Vi fick rådata från URL:en. Nu är det dags att extrahera den information vi behöver från rådata. Låt oss använda paketet cheerio för att extrahera data.

Att extrahera data som involverar HTML-taggar med cheerio är en cakewalk. Innan vi går in på den faktiska datan, låt oss se några exempeldataanalyser med cheerio.

  • Analysera HTML-data med metoden cheerio.load.
const parsedSampleData = cheerio.load(
      `<div id="container"><p id="title">I'm title</p></div>`
   );
  • Vi har analyserat HTML-koden ovan. Hur extraherar man p-taggens innehåll från den? Det är samma som väljarna i JavaScript DOM-manipulation.

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

Du kan välja taggarna som du vill. Du kan kolla in olika metoder från cheerio officiella hemsida.

  • Nu är det dags att extrahera världscuplistan. För att extrahera informationen behöver vi känna till HTML-taggarna som informationen ligger på sidan. Gå till cricket-VM Wikipedia-sida och inspektera sidan för att få information om HTML-taggar.

Här är hela koden.

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

Och här är de skrapade uppgifterna.

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

Coolt 😎, är det inte sant?

Skrapande mall

Att hämta rådata från URL:en är vanligt i alla webbskrapningsprojekt. Den enda delen som ändras är att extrahera data enligt kravet. Du kan prova koden nedan som mall.

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

Slutsats

Du har lärt dig hur man skrapar en webbsida. Nu är det din tur att träna på kodning.

Jag skulle också föreslå att du kollar in populära ramverk för webbskrapning för att utforska och molnbaserade webbskrapningslösningar.

Glad kodning 🙂

Gillade du att läsa artikeln? Vad sägs om att dela med världen?