Komma igång med Web Scraping i JavaScript

Innehållsförteckning

Att utvinna information från webbsidor, ofta kallat webbskrapning, är en fascinerande aspekt av programmering.

Men vad är egentligen webbskrapning?

Och varför är det en relevant teknik?

Låt oss utforska svaren.

Vad innebär webbskrapning?

Webbskrapning avser en automatiserad process för att hämta data från webbplatser.

Användningsområdena för webbskrapning är omfattande. Det kan användas för att extrahera prisinformation från olika e-handelsplattformar för prisjämförelser, hämta dagliga valutakurser eller till och med bygga en egen sökmotor liknande Google eller Yahoo. Listan med möjligheter är lång.

Med kunskapen om hur man utvinner data från webbsidor öppnas dörrar till en mängd användningsområden. Du bestämmer vad du vill göra med informationen.

Ett program som är konstruerat för att hämta data från webbsidor kallas för en webbskrapa. I den här texten får du lära dig hur man skapar webbskrapor med hjälp av JavaScript.

Webbskrapning består huvudsakligen av två steg:

Att hämta själva data genom att använda förfrågningsbibliotek och en headless webbläsare.
Att analysera och extrahera den specifika information som man är ute efter från den hämtade datan.

Låt oss starta direkt.

Förberedelse av projektet

Vi förutsätter att du har Node installerat. Om inte, rekommenderar vi att du följer en installationsguide för NodeJS.

För webbskrapningen i JavaScript kommer vi att använda biblioteken node-fetch och cheerio. Vi kommer att använda npm för att hantera tredjepartsbibliotek i projektet.

Här följer en kort steg-för-steg beskrivning för att komma igång med installationen:

Skapa en mapp, till exempel ”web_scraping”, och navigera till den mappen.
Använd kommandot ”npm init” för att starta projektet.
Svara på frågorna efter eget önskemål.
Installera de nödvändiga biblioteken med kommandot:

npm install node-fetch cheerio

Låt oss kort undersöka vad de installerade biblioteken gör.

node-fetch

Biblioteket node-fetch ger funktionaliteten hos ”window.fetch” i Node.js-miljön. Det underlättar HTTP-anrop för att hämta rådata.

cheerio

Biblioteket cheerio används för att analysera och extrahera önskad information från den hämtade rådatan.

Med node-fetch och cheerio har vi allt som behövs för webbskrapning i JavaScript. Vi kommer inte att gå igenom alla metoder som biblioteken tillhandahåller. Vi kommer istället att fokusera på grunderna i webbskrapning och de metoder som är mest användbara.

Det bästa sättet att lära sig webbskrapning är genom att praktisera. Så låt oss börja direkt.

Skrapa listan över Cricket VM

Nu ska vi göra en riktig webbskrapning.

Vad ska vi extrahera?

Med rubriken i åtanke, gissar jag att du redan har en aning. Just det, vi ska extrahera alla cricket-VM-vinnare och tvåor fram till nu.

Skapa en fil som heter ”extract_cricket_world_cups_list.js” i projektmappen.
Vi kommer att använda Wikipedias sida om Cricket VM för att hämta den nödvändiga informationen.
Först behöver vi hämta rådatan med hjälp av node-fetch-biblioteket.
Koden nedan hämtar rådatan från den specifika Wikipedia-sidan.

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

// Funktion för att hämta rådatan
const getRawData = (URL) => {
   return fetch(URL)
      .then((response) => response.text())
      .then((data) => {
         return data;
      });
};

// URL för datan
const URL = "https://en.wikipedia.org/wiki/Cricket_World_Cup";

// Huvudfunktionen
const getCricketWorldCupsList = async () => {
   const cricketWorldCupRawData = await getRawData(URL);
   console.log(cricketWorldCupRawData);
};

// Anropa huvudfunktionen
getCricketWorldCupsList();

Vi har nu hämtat rådatan från URL:en. Nu är det dags att extrahera den information vi behöver. Vi kommer att använda cheerio-biblioteket för att göra det.

Att extrahera data som finns i HTML-taggar med cheerio är relativt enkelt. Innan vi börjar med den riktiga datan, ska vi titta på några exempel på dataanalys med cheerio.

Analysera HTML-data med metoden ”cheerio.load”.

const parsedSampleData = cheerio.load(
      `<div id="container"><p id="title">Jag är en rubrik</p></div>`
   );

Vi har nu analyserat HTML-koden ovan. Hur extraherar vi innehållet i ”p”-taggen? Det fungerar på liknande sätt som selektorer i JavaScript DOM-manipulation.

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

Du kan välja de taggar du vill. Du kan hitta mer information om olika metoder på cheerios officiella webbplats.

Nu är det dags att extrahera VM-listan. För att göra detta behöver vi undersöka HTML-taggarna på sidan. Gå till Wikipedias sida om Cricket VM och inspektera sidan för att se hur informationen är strukturerad med HTML-taggar.

Här är hela koden:

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

// Funktion för att hämta rådata
const getRawData = (URL) => {
   return fetch(URL)
      .then((response) => response.text())
      .then((data) => {
         return data;
      });
};

// URL för datan
const URL = "https://en.wikipedia.org/wiki/Cricket_World_Cup";

// Huvudfunktionen
const getCricketWorldCupsList = async () => {
   const cricketWorldCupRawData = await getRawData(URL);

   // Analysera datan
   const parsedCricketWorldCupData = cheerio.load(cricketWorldCupRawData);

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

   console.log("År --- Vinnare --- Tvåa");
   worldCupsDataTable.forEach((row) => {
      // Extrahera `td` taggarna
      if (row.name === "tr") {
         let year = null,
            winner = null,
            runner = null;

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

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

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

         // Extrahera tvåa
         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}`);
         }
      }
   });
};

// Anropa huvudfunktionen
getCricketWorldCupsList();

Här är den skrapade datan:

År --- Vinnare --- Tvåa
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, eller hur? 😎

Skrapningsmall

Att hämta rådata från en URL är en standardprocedur i alla webbskrapningsprojekt. Den variabel som ändras är den del där datan extraheras, beroende på det specifika behovet. Du kan använda koden nedan som en mall:

const fetch = require("node-fetch");
const cheerio = require("cheerio");
const fs = require("fs");
// Funktion för att hämta rådata
const getRawData = (URL) => {
   return fetch(URL)
      .then((response) => response.text())
      .then((data) => {
         return data;
      });
};
// URL för datan
const URL = "https://example.com/";
// Huvudfunktionen
const scrapeData = async () => {
   const rawData = await getRawData(URL);
   // Analysera datan
   const parsedData = cheerio.load(rawData);
   console.log(parsedData);
   // Skriv kod för att extrahera datan
   // här
   // ...
   // ...
};
// Anropa huvudfunktionen
scrapeData();