Початок роботи з веб-скрапінгом у 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-запити та отримувати необроблені дані.

cheerio

Пакунок cheerio використовується для аналізу та вилучення необхідної інформації з необроблених даних.

Двох пакетів node-fetch і cheerio достатньо для веб-скрапінгу в JavaScript. Ми не збираємося бачити кожен метод, який надають пакети. Ми побачимо потік веб-збирання та найкорисніші методи в цьому потоці.

Роблячи це, ви навчитеся веб-скрейпінгу. Отже, приступаємо до роботи.

Вичищення списку Кубка світу з крикету

Тут, у цьому розділі, ми збираємося зробити фактичне веб-збирання.

Що ми видобуваємо?

За назвою розділу, думаю, ви легко здогадаєтесь. Так, все, що ви думаєте, правильно. Давайте витягнемо всіх переможців і віце-чемпіонів світу з крикету.

  • Створіть у проекті файл з назвою extract_cricket_world_cups_list.js.
  • Ми будемо використовувати Кубок світу з крикету Вікіпедії сторінку, щоб отримати потрібну інформацію.
  • Спочатку отримайте вихідні дані за допомогою пакета node-fetch.
  • Наведений нижче код отримує необроблені дані вищезгаданої сторінки Вікіпедії.
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, щоб отримати дані.

Отримання даних, які включають HTML-теги за допомогою cheerio, — легка прогулянка. Перш ніж приступити до фактичних даних, давайте подивимося приклад аналізу даних за допомогою cheerio.

  • Проаналізуйте дані HTML за допомогою методу cheerio.load.
const parsedSampleData = cheerio.load(
      `<div id="container"><p id="title">I'm title</p></div>`
   );
  • Ми проаналізували наведений вище HTML-код. Як витягти з нього вміст тегу p? Це те саме, що й селектори в маніпуляціях з DOM JavaScript.

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

Ви можете вибрати теги, як хочете. Ви можете перевірити різні методи з офіційний сайт cheerio.

  • Тепер настав час витягти список чемпіонату світу. Щоб отримати інформацію, нам потрібно знати теги HTML, які містять інформацію на сторінці. Перейти до сторінка чемпіонату світу з крикету у Вікіпедії і перевірте сторінку, щоб отримати інформацію про теги 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();

Висновок

Ви навчилися очищати веб-сторінку. Тепер ваша черга попрактикуватися в кодуванні.

Я б також запропонував ознайомитися з популярними фреймворками веб-збирання та хмарними рішеннями для веб-збирання.

Щасливого кодування 🙂

Вам сподобалось читати статтю? Як щодо того, щоб поділитися зі світом?