Първи стъпки с уеб скрапинг в JavaScript

Уеб скрапирането е едно от най-интересните неща в света на кодирането.

Какво е уеб скрапинг?

Защо изобщо съществува?

Нека разберем отговорите.

Какво е уеб скрапинг?

Уеб сканирането е автоматизирана задача за извличане на данни от уебсайтове.

Има много приложения на уеб скрапинг. Извличане на цените на продуктите и сравняването им с различни платформи за електронна търговия. Получаване на ежедневна оферта от мрежата. Изграждане на ваша собствена търсачка като Google, Yahoo и др., Списъкът продължава.

Можете да направите повече, отколкото си мислите с уеб скрапинг. След като научите как да извличате данните от уебсайтове, можете да правите каквото искате с данните.

Програмата, която извлича данни от уебсайтове, се нарича уеб скрепер. Ще се научите да пишете уеб скрапери на JavaScript.

Има основно две части на уеб изстъргването.

  • Получаване на данните с помощта на библиотеки със заявки и браузър без глава.
  • Разбор на данните за извличане на точната информация, която искаме от данните.

Без повече шум, нека да започнем.

Настройка на проекта

Предполагам, че имате инсталиран Node, ако не, вижте ръководството за инсталиране на NodeJS.

Ще използваме пакетите node-fetch и cheerio за уеб скрапинг в JavaScript. Нека настроим проекта с npm да работи с пакет на трета страна.

Нека бързо да видим стъпките за завършване на нашата настройка.

  • Създайте директория, наречена web_scraping, и отидете до нея.
  • Изпълнете командата npm init, за да инициализирате проекта.
  • Отговорете на всички въпроси според вашите предпочитания.
  • Сега инсталирайте пакетите с помощта на командата
npm install node-fetch cheerio

Нека да видим проблясъци на инсталираните пакети.

  Открийте филми с участието на любимия ви актьор и още

извличане на възел

Пакетът node-fetch пренася window.fetch в средата на node js. Помага да се правят HTTP заявки и да се получават необработените данни.

наздраве

Пакетът наздраве се използва за анализиране и извличане на необходимата информация от необработените данни.

Два пакета node-fetch и cheerio са достатъчно добри за уеб скрапиране в JavaScript. Няма да видим всеки метод, който предоставят пакетите. Ще видим потока на уеб скрапинга и най-полезните методи в този поток.

Ще научите уеб скрапинг, като го правите. И така, да се заемем с работата.

Списък за Световната купа по крикет

Тук, в този раздел, ще направим действително уеб скрапинг.

Какво извличаме?

По заглавието на раздела мисля, че лесно ще се досетите. Да, каквото и да си мислиш е правилно. Нека извлечем всички победители и вицешампиони на световната купа по крикет досега.

  • Създайте файл, наречен extract_cricket_world_cups_list.js в проекта.
  • Ние ще използваме Световно първенство по крикет на Wikipedia страница, за да получите желаната информация.
  • Първо вземете необработените данни с помощта на пакета за извличане на възли.
  • Кодът по-долу получава необработените данни от горната страница на Wikipedia.
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();

Получихме необработените данни от URL адреса. Сега е време да извлечем информацията, от която се нуждаем, от необработените данни. Нека използваме пакета cheerio, за да извлечем данните.

  Как да запазите имейл в Gmail като EML файл на вашия твърд диск

Извличането на данни, които включват HTML тагове с cheerio, е безпроблемно. Преди да навлезем в действителните данни, нека видим някои примерни анализи на данни с помощта на cheerio.

  • Анализирайте HTML данните, като използвате метода cheerio.load.
const parsedSampleData = cheerio.load(
      `<div id="container"><p id="title">I'm title</p></div>`
   );
  • Анализирахме горния HTML код. Как да извлека съдържанието на p тага от него? Това е същото като селекторите при манипулирането на JavaScript DOM.

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

Можете да изберете етикетите, както искате. Можете да разгледате различни методи от официален уебсайт на cheerio.

  • Сега е време да извадим списъка за световната купа. За да извлечем информацията, трябва да знаем HTML таговете, че информацията се намира на страницата. Отидете на страница на световната купа по крикет в Wikipedia и прегледайте страницата, за да получите информация за HTML тагове.

Ето пълния код.

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

И ето изчерпаните данни.

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

Страхотно 😎, така ли е?

  Как да конвертирате изображение в сива боя

Шаблон за изстъргване

Получаването на необработените данни от URL е често срещано във всеки проект за уеб скрапиране. Единствената част, която се променя, е извличането на данните според изискването. Можете да опитате кода по-долу като шаблон.

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

Заключение

Научихте как да скрейпвате уеб страница. Сега е ваш ред да практикувате кодиране.

Бих предложил също така да проверите популярните рамки за уеб скрапинг, за да изследвате и базирани в облак решения за уеб скрапинг.

Приятно кодиране 🙂

Приятно ви е да прочетете статията? Какво ще кажете за споделяне със света?