Lær Nettskraping i JavaScript: Enkelt Steg-for-Steg Guide

Nettutskraping er en fascinerende gren innenfor programmering.

Men hva innebærer egentlig nettskraping?

Og hvorfor eksisterer det?

La oss avdekke svarene.

Hva er Nettutskraping?

Nettskraping, også kalt web-skraping, er en automatisert prosess for å hente data fra ulike nettsider.

Det finnes mange bruksområder for denne teknikken. For eksempel kan man samle inn priser på produkter fra ulike nettbutikker og sammenligne dem. Man kan også hente daglige nyhetsoppdateringer eller til og med bygge en egen søkemotor, lik Google eller Yahoo. Mulighetene er mange.

Med kunnskap om nettskraping kan du utrette mer enn du kanskje tror. Når du forstår hvordan du henter data fra nettsider, kan du bruke informasjonen på utallige måter.

Et program som er utviklet for å hente data fra nettsider kalles en nettskraper. I denne artikkelen lærer du hvordan du kan programmere en slik skraper ved hjelp av JavaScript.

Nettskraping består hovedsakelig av to faser:

  • Innsamling av data ved hjelp av biblioteker for nettforespørsler og en «hodeløs» nettleser.
  • Analyse av dataene for å isolere den spesifikke informasjonen vi trenger.

La oss starte med en gang.

Prosjektoppsett

Vi forutsetter at du allerede har installert Node. Hvis ikke, må du sjekke ut installasjonsveiledningen for NodeJS først.

Vi skal bruke pakkene `node-fetch` og `cheerio` for å gjennomføre nettskraping i JavaScript. La oss konfigurere prosjektet med `npm` for å kunne jobbe med tredjepartspakker.

Her er en rask oversikt over trinnene:

  • Opprett en mappe med navnet `web_scraping` og naviger til den.
  • Kjør kommandoen `npm init` for å initialisere prosjektet.
  • Svar på spørsmålene som dukker opp basert på dine preferanser.
  • Installer pakkene ved å bruke denne kommandoen:
npm install node-fetch cheerio

La oss se nærmere på pakkene vi har installert.

`node-fetch`

`node-fetch`-pakken gir oss `window.fetch`-funksjonen i Node.js-miljøet. Den gjør det mulig å sende HTTP-forespørsler og hente rådata.

`cheerio`

`cheerio`-pakken brukes til å analysere og trekke ut den nødvendige informasjonen fra de hentede rådataene.

Disse to pakkene, `node-fetch` og `cheerio`, er mer enn tilstrekkelig for å utføre nettskraping i JavaScript. Vi kommer ikke til å gå gjennom alle metodene som pakkene tilbyr, men fokuserer på den grunnleggende arbeidsflyten og de mest brukte metodene.

Du lærer best ved å prøve selv. Så la oss komme i gang.

Skraping av Liste over Cricket-VM

I denne delen skal vi gjøre selve utskrapingen.

Hva skal vi hente?

Med tittelen på seksjonen tenker jeg at du lett kan gjette det. Ja, du tenker riktig. Vi skal trekke ut alle vinnerne og andreplassene fra cricket-VM opp gjennom årene.

  • Opprett en fil med navnet `extract_cricket_world_cups_list.js` i prosjektmappen.
  • Vi bruker Wikipedia-siden for cricket-VM som datakilde.
  • Først henter vi rådataene med `node-fetch`-pakken.
  • Koden under henter rådataene fra Wikipedia-siden.
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 har nå hentet rådata fra URL-en. Nå er det på tide å trekke ut den spesifikke informasjonen vi trenger. Vi bruker `cheerio`-pakken for å analysere dataene.

Det er enkelt å trekke ut data som er omringet av HTML-tagger med `cheerio`. Før vi går i gang med de faktiske dataene, skal vi se på et lite eksempel med datainndeling.

  • Vi analyserer HTML-dataene med `cheerio.load`-metoden.
const parsedSampleData = cheerio.load(
      `<div id="container"><p id="title">I'm title</p></div>`
   );
  • Vi har analysert HTML-koden ovenfor. Hvordan trekker vi ut innholdet fra p-taggen? Det gjøres på samme måte som i JavaScript DOM-manipulasjon med selektorer.

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

Du kan velge tagger etter behov. Du kan se flere metoder på den offisielle `cheerio`-nettsiden.

  • Nå er det på tide å trekke ut selve VM-listen. For å gjøre dette må vi vite hvilke HTML-tagger som inneholder informasjonen på siden. Gå til Wikipedia-siden for cricket-VM og inspiser HTML-en for å finne de nødvendige taggene.

Her er den komplette 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();

Og her er de utskrapte dataene:

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

Kult, ikke sant? 😎

Skrapemal

Å hente rådata fra en URL er et felles trinn i alle nettskrapingsprosjekter. Det som varierer er hvordan dataene blir trukket ut og tilpasset det spesifikke formålet. Du kan bruke koden under som utgangspunkt.

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

Konklusjon

Du har nå lært det grunnleggende om hvordan du skraper en nettside. Nå er det din tur til å øve og kode!

Jeg anbefaler også at du utforsker de mer populære rammeverkene for nettskraping, og at du ser på skybaserte løsninger.

Lykke til med kodingen! 🙂

Syntes du artikkelen var interessant? Del den gjerne med andre!