CoderCastrov logo
CoderCastrov
Парсинг

Парсинг веб-страниц с использованием Node.js и Cheerio

Парсинг веб-страниц с использованием Node.js и Cheerio
просмотров
8 мин чтение
#Парсинг
Table Of Content

В современной цифровой эпохе данные имеют огромную ценность. Парсинг веб-страниц стал неотъемлемой частью для бизнеса, исследователей и отдельных лиц, чтобы извлекать информацию из огромного объема данных в сети. Парсинг веб-страниц - это техника, используемая для извлечения данных с веб-сайтов, которые затем могут быть использованы для исследований, анализа данных, создания веб-приложений и многого другого. Node.js предлагает несколько библиотек и модулей, которые упрощают парсинг веб-страниц, включая быструю, гибкую и легковесную библиотеку Cheerio. В этой статье вы узнаете, как парсить веб-страницы с использованием Node.js и Cheerio, чтобы вы могли использовать эту технику.

Давайте начнем с предупреждения! Важно отметить, что перед парсингом веб-сайта необходимо учесть юридические и этические вопросы. Вы должны убедиться, что парсинг веб-сайта разрешен, прежде чем делать это. В этой статье мы будем использовать веб-сайты, которые разрешают парсинг, чтобы вы могли следовать за нами без каких-либо опасений.

  • Чтобы начать парсинг веб-страниц, на вашей системе должен быть установлен Node.js. Если у вас его нет, вы можете скачать его с официальной страницы загрузки Node.js.
  • Кроме того, на вашем компьютере должен быть установлен текстовый редактор, такой как Visual Studio Code или Atom, чтобы писать и запускать код.
  • Также важно понимать JavaScript, Node.js и модель объектов документа (DOM), чтобы начать парсинг веб-страниц.

С чем мы будем работать? Cheerio - это быстрая, гибкая и элегантная библиотека для парсинга и манипулирования HTML и XML. Cheerio имеет более 26 тысяч звезд на GitHub. Как указано в его документации, он:

  • реализует подмножество основной библиотеки jQuery.
  • удаляет любые несоответствия DOM и ненужный код браузера из библиотеки jQuery, раскрывая ее элегантный API.
  • использует простую и последовательную модель DOM, что приводит к эффективному парсингу, манипуляции и рендерингу.
  • может парсить практически любой HTML или XML документ.
  • совместим с браузерной и серверной средами.

Основы Cheerio

Прежде чем приступить к парсингу веб-сайта, давайте сначала разберемся с основами Cheerio, такими как загрузка разметки и ее изменение, перебор списка элементов, добавление и вставка элементов и т. д.

Чтобы запустить приведенные ниже фрагменты кода, сначала установите все необходимые зависимости для проекта. Для этого необходимо создать каталог, инициализировать проект, установить библиотеки и т. д. Эти шаги описаны ниже, поэтому выполните их перед запуском этих фрагментов кода.

Загрузка и изменение

В Cheerio вы можете легко загрузить HTML- или XML-документ с помощью метода cheerio.load(). Этот метод возвращает функцию, которую можно использовать для изменения загруженного документа.

const cheerio = require("cheerio");
const markup = `<html>  <head>    <title>Cheerio Demo</title>  </head>  <body>    <p>Hello, coders!</p>  </body></html >`;

// Загрузка разметки в Cheerio
const $ = cheerio.load(markup);
console.log($.html());

// Изменение разметки
$("title").text("Измененный заголовок");
$("p").text("Как дела, кодеры?");
console.log($.html());

В приведенном выше примере мы загружаем HTML-документ, хранящийся в переменной markup, в Cheerio с помощью метода cheerio.load(). Затем мы используем синтаксис в стиле jQuery Cheerio для выбора элементов из документа и изменения их свойств.

Наконец, мы можем легко увидеть результаты наших изменений, выводя измененный документ с помощью метода $.html().

Чтобы увидеть разметку в терминале, выполните приведенный выше код. Вот пример того, что вы должны увидеть в своем терминале:

Выбор элемента

В этом примере мы загружаем HTML-строку в Cheerio. Затем выбираем элемент с class="audi_car" с помощью функции $ и выводим текст выбранного элемента с помощью функции text().

// Загрузка Cheerio
const cheerio = require("cheerio");

// HTML-строка для разбора
const markup = `
<ul class="cars">
  <li class="audi_car">Audi</li>
  <li class="bmw_car">BMW</li>
</ul>
`;

// Загрузка HTML-строки в Cheerio
const $ = cheerio.load(markup);

// Выбор элемента с class="audi_car"
const myDiv = $(".audi_car");

// Вывод текста выбранного элемента
console.log(myDiv.text()); // Вывод: Audi

Важно отметить, что мы можем использовать другие селекторы jQuery для выбора элементов на основе их имени тега, класса или других атрибутов. Это делает Cheerio мощным инструментом для выбора и манипулирования конкретными элементами в HTML-документе.

Перебор списка элементов

Мы будем использовать метод cheerio.load() для загрузки HTML-документа. Затем мы применим селектор в стиле jQuery, чтобы получить список элементов.

Затем мы будем использовать функцию .each() для перебора каждого элемента в списке. При переборе мы можем извлекать информацию о текущем элементе, используя селектор $(this).

Мы можем получить значение атрибута href текущего элемента, используя $(this).attr('href').

const cheerio = require("cheerio");
const html = `<ul>  <li>    <a href="https://openreplay.com/">Openreplay</a>  </li>  <li>    <a href="https://cheerio.js.org/">Cheerio</a>  </li></ul>;`;

const $ = cheerio.load(html);

$("li a").each(function () {
  const href = $(this).attr("href");
  const text = $(this).text();
  console.log(`${text} (${href})`);
});

// Output:
// Openreplay (https://openreplay.com/)
// Cheerio (https://cheerio.js.org/)

Добавление элемента в начало или конец

Чтобы добавить элемент в начало или конец разметки в Cheerio, можно использовать функции .append() или .prepend() соответственно.

Вот пример добавления нового элемента <div> в конец существующей разметки:

const cheerio = require("cheerio");

const markup = `
<html>
  <head></head>
  <body>
  <h1>Hola, cheerio!</h1>
    <p>Hello, coders!</p>
  </body>
</html>;`;

const $ = cheerio.load(markup);

$("body").append("<div>Новый элемент добавлен!</div>");
console.log($.html());

Вот пример добавления нового элемента <div> в начало существующей разметки:

const cheerio = require("cheerio");

const markup = `
<html>
  <head></head>
  <body>
  <h1>Hola, cheerio!</h1>
    <p>Hello, coders!</p>
  </body>
</html>;`;

const $ = cheerio.load(markup);

$("body").prepend("<div>Новый элемент добавлен!</div>");
console.log($.html());

Вот результат работы обоих функций:

Повтор сессии для разработчиков

Раскройте фрустрации, поймите ошибки и исправьте замедления, как никогда раньше с помощью OpenReplay - набора инструментов для повтора сессии с открытым исходным кодом для разработчиков. Вы можете разместить его самостоятельно в течение нескольких минут, получив полный контроль над данными ваших клиентов.

_Счастливого отладки! _Попробуйте использовать OpenReplay сегодня.

Парсинг веб-страницы

В этом разделе мы рассмотрим, как парсить веб-страницу с помощью Cheerio. Перед тем, как парсить любой веб-сайт, важно убедиться, что у вас есть на это разрешение.

Мы извлечем коды ISO 3166–1 alpha-3 для всех стран, перечисленных на этой странице Википедии.

Шаг 1: Создание директории

В этом шаге необходимо создать директорию проекта, выполнив следующую команду в терминале. Команда создаст папку с названием "cheerio_scraping".

mkdir cheerio_scraping

В следующем шаге вы сможете открыть только что созданную директорию в выбранном вами текстовом редакторе и инициализировать проект.

Шаг 2: Инициализация проекта

В этом шаге перейдите в директорию проекта и инициализируйте проект. Сначала откройте директорию, созданную на предыдущем шаге, с помощью выбранного вами текстового редактора. Затем выполните следующую команду, чтобы инициализировать проект:

npm init -y

После успешного выполнения данной команды, в корне вашей директории проекта будет создан файл package.json.

Шаг 3: Установка необходимых зависимостей

Установите зависимости проекта, запустив следующую команду.

npm i axios cheerio pretty

При выполнении вышеуказанной команды успешно зарегистрируются три зависимости в файле package.json в поле зависимостей.

Первая зависимость - axios, популярный HTTP-клиент, который без проблем работает как в node, так и в браузере.

Для разбора разметки и извлечения нужных данных с использованием Cheerio нам нужно использовать Axios для получения разметки с веб-сайта. Однако, если вы предпочитаете, вы также можете использовать другой HTTP-клиент для получения разметки вместо Axios.

Наконец, есть пакет npm, который помогает красиво оформить разметку. Это упрощает чтение разметки при выводе на терминал.

Шаг 4: Изучите веб-страницу

Для извлечения данных с веб-страницы важно понять ее структуру HTML.

Допустим, вы хотите извлечь информацию о ISO 3166–1 alpha-3, находящуюся в разделе Текущие коды на странице Википедии.

Откройте инструменты разработчика в вашем браузере, чтобы просмотреть и проанализировать HTML-структуру страницы. Перейдите к разделу текущих кодов, и вы увидите структуру HTML, примерно такую:

Шаг 5: Наконец, выполните парсинг веб-страницы

Создайте новый файл JavaScript (в моем случае scrap.js) с помощью следующей команды в вашем терминале редактора кода или создайте его вручную в корневом каталоге.

touch scrap.js

Так выглядит моя папка в редакторе кода. Убедитесь, что вы создаете файл JavaScript в корневом каталоге.

scrap.js:

// Загрузка зависимостей, но нам не нужен 'pretty',
// так как мы не будем выводить HTML в терминал.
const axios = require("axios");
const cheerio = require("cheerio");
const fs = require("fs");
// URL страницы, которую мы хотим распарсить
const url = "https://en.wikipedia.org/wiki/ISO_3166-1_alpha-3";
// Асинхронная функция, выполняющая фактический парсинг
async function scrapeData() {
  try {
    // Получаем HTML-содержимое страницы
    const { data } = await axios.get(url);
    // Загружаем ранее полученное HTML-содержимое
    const $ = cheerio.load(data);
    // Выбираем все элементы списка в классе 'plainlist'
    const listItems = $(".plainlist ul li");
    // Создаем массив для хранения конечного результата
    const countries = [];
    // Используем метод .each для перебора элементов 'li'
    listItems.each((idx, el) => {
      // Объект для хранения названий стран и их ISO-кодов
      const country = { name: "", iso3: "" };
      // Получаем текст из элементов 'a' и 'span' и сохраняем его в вышеуказанный объект
      country.name = $(el).children("a").text();
      country.iso3 = $(el).children("span").text();
      countries.push(country);
    });
    // Выводим массив стран в консоль
    console.dir(countries);
    // Сохраняем данные из массива 'countries' в файл 'countries.json'
    fs.writeFile("countries.json", JSON.stringify(countries, null, 2), (err) => {
      if (err) {
        console.error(err);
        return;
      }
      console.log("Данные успешно записаны в файл!");
    });
  } catch (err) {
    console.error(err);
  }
}
scrapeData();

Давайте ближе рассмотрим код:

  • Функция scrapeData() определена как асинхронная функция, которая выполняет фактический парсинг. Она содержит асинхронный код, который ожидает ответа от сервера перед переходом к следующему шагу.
  • Внутри функции scrapeData() используется библиотека Axios для получения HTML-содержимого веб-страницы, а Cheerio используется для загрузки этого содержимого.
  • Выражение $(".plainlist ul li") выбирает все элементы списка в классе plainlist.
  • Выражение $(el).children("a").text() получает текст из элемента 'a' внутри текущего элемента списка, а выражение $(el).children("span").text() получает текст из элемента 'span'.
  • Метод fs.writeFile() сохраняет данные из массива стран в файл с именем countries.json.
  • Если происходит ошибка при записи, она выводится в консоль. Если запись прошла успешно, выводится сообщение об успехе.

Вывод в терминале:

countries.json:

Заключение

В этой статье мы узнали, как парсить веб-страницу с помощью Cheerio, быстрой, гибкой и элегантной библиотеки для разбора и манипулирования HTML и XML. Кроме того, мы рассмотрели важность использования Axios и Pretty при парсинге данных с веб-страниц. В целом, такой подход предлагает надежный и эффективный способ извлечения ценной информации с веб-сайтов.