Парсинг веб-страниц с использованием различных техник (Cheerio) - Часть 1

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

Эта статья предназначена исключительно для образовательных целей

Парсинг веб-страниц можно выполнять с использованием различных языков программирования и техник. Мы будем использовать Node.js и несколько других библиотек.

Убедитесь, что на вашей системе установлен Node.js.

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

Например, есть селекторы, которые помогают выбрать отдельный элемент на веб-странице. Это может быть идентификатор, класс и т.д.

Мы используем библиотеки Axios, Cheerio и Expressjs.

Axios - это клиент HTTP, основанный на промисах, который позволяет нам отправлять запросы по URL-адресу.
Cheerio - это HTML-парсер, который помогает извлекать текст или другие атрибуты из элементов.
Express - это веб-сервер, который помогает превратить полученные данные в API.

Мы собираемся парсить сегодняшнюю рекомендуемую картинку из Википедии и превратить ее в API.

Если вы посмотрите на исходный код главной страницы, вы увидите, что вся секция обернута в div с идентификатором "mp-tfp". Таким образом, это наш корневой селектор.

Изображение имеет атрибут src, а содержимое тела находится внутри корневого элемента с тегом p.

В инструментах разработчика Chrome вы можете щелкнуть правой кнопкой мыши на теге Image и в меню "Копировать" выбрать опцию "Копировать селектор".

Это даст что-то вроде этого: "#mp-tfp > table > tbody > tr > td:nth-child(1) > a > img". Нам также нужен текст внутри тега p. Поэтому щелкните правой кнопкой мыши на нем и сделайте то же самое, и мы получим это: "#mp-tfp > table > tbody > tr > td:nth-child(2) > p:nth-child(1)".

Сохраните оба селектора в безопасности, они понадобятся нам позже в статье.

В пустом каталоге выполните следующую команду для инициализации проекта.

Я буду использовать Yarn в качестве менеджера пакетов. Вы можете использовать npm или pnpm.

yarn init -y

Это создаст файл package.json. Теперь установите следующие зависимости.

yarn add axios cheerio express

После завершения установки создайте файл index.js.

Теперь мы можем начать импортировать только что установленные библиотеки внутри index.js.

const axios = require("axios");
const cheerio = require("cheerio");
const express = require("express");
const app = express();

Поскольку мы собираемся создать из этого API, нам нужно создать GET-конечную точку. Поэтому вставьте следующие строки в файл.

app.get("/", (req, res) => {
   res.send("Hello World");
});

app.listen(3000, () => {
  console.log("Server is running on port 3000");
});

Вы можете запустить сервер Node, введя следующую команду.

node index.js

Вы увидите сообщение в консоли "Server is running on port 3000".

Если вы откроете http://localhost:3000 в браузере, вы получите сообщение "Hello, world".

Просто замените строку res.send на запрос Axios и URL Википедии. Если вы отправите запрос на URL с помощью Axios, вы получите HTML-код в качестве ответа. Сохраните ответ в переменной с именем HTML.

  axios
    .get("https://en.wikipedia.org/wiki/Main_Page")
    .then((response) => {
      const html = response.data;
    })
    .catch((error) => {
      console.log(error);
    });

Загрузите переменную HTML в Cheerio для парсинга данных.

const $ = cheerio.load(html);
const featuredImage = $("#mp-tfp > table > tbody > tr > td:nth-child(1) > a > img").attr("src");
const featuredDesc = $("#mp-tfp > table > tbody > tr > td:nth-child(2) > p:nth-child(1)").text().trim();

Создайте две переменные "featuredImage" и "featuredDesc" и передайте им селектор, полученный на предыдущем шаге. Теперь отправьте их в качестве ответа API.

res.send({ featuredImage, featuredDesc });

Итоговый код будет выглядеть примерно так.

const axios = require("axios");
const cheerio = require("cheerio");
const express = require("express");
const app = express();

app.get("/", (req, res) => {
  axios
    .get("https://en.wikipedia.org/wiki/Main_Page")
    .then((response) => {
      const html = response.data;
      const $ = cheerio.load(html);

      const featuredImage = $(
        "#mp-tfp > table > tbody > tr > td:nth-child(1) > a > img"
      ).attr("src");
      const featuredDesc = $(
        "#mp-tfp > table > tbody > tr > td:nth-child(2) > p:nth-child(1)"
      )
        .text()
        .trim();

      res.send({ featuredImage, featuredDesc });
    })
    .catch((error) => {
      console.log(error);
    });
});

app.listen(3000, () => {
  console.log("Server is running on port 3000");
});

Перезапустите сервер Node и откройте http://localhost:3000 в браузере. Теперь вы увидите что-то вроде этого.

Теперь вы можете использовать его в качестве своего API для создания веб-проекта. Этот метод хорошо работает для статических веб-сайтов.

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

Не стесняйтесь комментировать свои мысли и сообщать о возникших трудностях.

_Эта статья написана MC.Naveen для Timeless