Начало работы с веб-скрейпингом в 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.
  • Мы будем использовать Кубок мира по крикету в Википедии страницу для получения нужной информации.
  • Сначала получите необработанные данные с помощью пакета 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());

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

  • Теперь пришло время извлечь список чемпионатов мира. Чтобы извлечь информацию, нам нужно знать 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();

Вывод

Вы научились парсить веб-страницу. Теперь ваша очередь попрактиковаться в программировании.

Я бы также посоветовал проверить популярные фреймворки веб-скрейпинга и облачные решения для веб-скрейпинга.

Удачного кодирования 🙂

Понравилось читать статью? Как насчет того, чтобы поделиться с миром?