Začínáme s škrábáním webu v JavaScriptu

Web scraping je jednou z nejzajímavějších věcí ve světě kódování.

Co je to web scraping?

Proč vůbec existuje?

Pojďme zjistit odpovědi.

Co je to Web Scraping?

Web scraping je automatický úkol pro extrakci dat z webových stránek.

Existuje mnoho aplikací web scrapingu. Extrahování cen produktů a jejich porovnání s různými platformami elektronického obchodu. Získání denní nabídky z webu. Vytvoření vlastního vyhledávače jako Google, Yahoo atd., Seznam pokračuje.

Se škrabáním webu můžete udělat víc, než si myslíte. Jakmile se naučíte extrahovat data z webových stránek, můžete si s daty dělat, co chcete.

Program, který extrahuje data z webových stránek, se nazývá web scraper. Naučíte se psát webové scrapery v JavaScriptu.

Seškrabování webu má hlavně dvě části.

  • Získávání dat pomocí knihoven požadavků a bezhlavého prohlížeče.
  • Analýza dat, abychom z dat extrahovali přesné informace, které chceme.

Bez dalších okolků můžeme začít.

Nastavení projektu

Předpokládám, že máte nainstalovaný Node, pokud ne, podívejte se na instalační příručku NodeJS.

Budeme používat balíčky node-fetch a cheerio pro web scraping v JavaScriptu. Pojďme nastavit projekt pomocí npm, aby pracoval s balíčkem třetí strany.

Pojďme se rychle podívat na kroky k dokončení našeho nastavení.

  • Vytvořte adresář s názvem web_scraping a přejděte do něj.
  • Spusťte příkaz npm init pro inicializaci projektu.
  • Odpovězte na všechny otázky podle svých preferencí.
  • Nyní nainstalujte balíčky pomocí příkazu
npm install node-fetch cheerio

Podívejme se na náhledy nainstalovaných balíčků.

  Celebrity on Demand: Co je Cameo?

node-fetch

Balíček node-fetch přináší window.fetch do prostředí node js. Pomáhá vytvářet požadavky HTTP a získávat nezpracovaná data.

cheerio

Balík cheerio se používá k analýze a extrakci informací, které jsou nezbytné z nezpracovaných dat.

Dva balíčky node-fetch a cheerio jsou dost dobré pro web scraping v JavaScriptu. Neuvidíme všechny metody, které balíčky poskytují. Uvidíme tok web scraping a nejužitečnější metody v tomto toku.

Naučíte se tím web scraping. Takže, pojďme se pustit do práce.

Seškrabování seznamu Světového poháru v kriketu

Zde v této sekci budeme provádět skutečné odstraňování webu.

Co těžíme?

Podle názvu sekce si myslím, že byste to snadno uhodli. Ano, cokoliv si myslíte, je správné. Pojďme si vybrat všechny vítěze a vítěze světového poháru v kriketu až do současnosti.

  • V projektu vytvořte soubor s názvem extract_cricket_world_cups_list.js.
  • Budeme používat Mistrovství světa v kriketu na Wikipedii stránku, abyste získali požadované informace.
  • Nejprve získejte nezpracovaná data pomocí balíčku node-fetch.
  • Níže uvedený kód získává nezpracovaná data z výše uvedené stránky Wikipedie.
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();

Získali jsme nezpracovaná data z adresy URL. Nyní je čas extrahovat informace, které potřebujeme, z nezpracovaných dat. K extrahování dat použijeme balíček cheerio.

Extrahování dat, která zahrnují značky HTML pomocí cheerio, je hračka. Než se dostaneme ke skutečným datům, podívejme se na několik ukázkových analýz dat pomocí cheerio.

  • Analyzujte data HTML pomocí metody cheerio.load.
const parsedSampleData = cheerio.load(
      `<div id="container"><p id="title">I'm title</p></div>`
   );
  • Analyzovali jsme výše uvedený HTML kód. Jak z něj extrahovat obsah značky p? Je to stejné jako u selektorů při manipulaci s JavaScriptem DOM.
  Spravujte své schůzky pomocí softwaru pro online schůzky [11 Calendly Alternatives]

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

Tagy si můžete vybrat, jak chcete. Můžete se podívat na různé metody z oficiální stránky cheerio.

  • Nyní je čas vytáhnout seznam světových pohárů. Abychom informace extrahovali, potřebujeme znát HTML značky, které informace na stránce leží. Přejít na stránka Mistrovství světa v kriketu na Wikipedii a prohlédněte si stránku, abyste získali informace o značkách HTML.

Zde je úplný kód.

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

A zde jsou seškrábaná data.

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

Skvělé 😎, je to tak?

  13 nejlepších kryptoměnových platforem a burz v roce 2022

Šablona škrábání

Získávání nezpracovaných dat z adresy URL je běžné v každém projektu webového scrapingu. Jediná část, která se mění, je extrahování dat podle požadavku. Níže uvedený kód můžete vyzkoušet jako šablonu.

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

Závěr

Naučili jste se, jak oškrábat webovou stránku. Nyní je řada na vás, abyste si procvičili kódování.

Navrhoval bych také vyzkoušet oblíbené rámce pro škrábání webu, abyste mohli prozkoumat a cloudová řešení pro škrábání webu.

Veselé kódování 🙂

Užili jste si čtení článku? Co takhle sdílet se světem?