Лучшие библиотеки для парсинга HTML в JavaScript

Библиотеки синтаксического анализа HTML — один из наиболее важных объектов для преобразования огромного количества неструктурированных данных, составляющих 85–90 % ежедневно генерируемых данных. Кроме того, эти данные недоступны для майнеров данных, которые могли бы выполнить обработку для фильтрации данных.

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

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

Приветствую вас

Cheerio — самая популярная библиотека анализа HTML-кода JavaScript, известная своей чрезвычайной и быстрой производительностью. Он основан на JQuery и используется для извлечения данных из документов HTML и XML.

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

npm i cheerio

Давайте посмотрим на этот сайт. Мы получим названия продуктов и их цены с веб-страницы. Важно отметить, что перед разбором и анализом структуры HTML нам нужна библиотека HTTP-запросов для доступа к веб-странице.

Давайте установим Unirest JS для выполнения этой задачи.

npm i unirest

Далее мы создадим парсер с помощью Unirest для загрузки HTML-кода веб-страницы.

const unirest = require("unirest");

const getHTML = async(url) => {

    const response = await unirest.get(url);

    if(response.status == 200){
        return response.body
    }
}

Пошаговое объяснение:

Первой строкой мы импортировали библиотеку Unirest, которая используется для установления HTTP-соединения с веб-серверами.
Далее мы объявили функцию getHTML, в которой будем выполнять все задачи, связанные со сбором HTML-данных.
После этого с помощью метода unirest.get мы отправили HTTP GET-запрос на целевой URL. Ключевое слово await используется здесь для ожидания ответа. Наконец, ответ сохраняется в переменной response.
Затем мы проверяем, равен ли код состояния HTTP 200, что указывает на успешный запрос. Если это правда, то выполняется блок if.

Наша часть очистки завершена. Теперь мы найдем теги необходимых объектов данных из HTML.

Как вы можете видеть на изображении выше, название продукта находится под тегом h2, а цена содержится внутри тега span с классом price.

Далее мы импортируем библиотеку Cheerio и проанализируем HTML, чтобы получить соответствующие данные.

const cheerio = require("cheerio");

const parseHTML = async () => {
  let url = "https://scrapeme.live/shop/";

  let html = await getHTML(url);

  let $ = cheerio.load(html);

  let products = []; // Initialize the products array

  $("li.product").each((i, el) => {
    products.push({
      product_names: $(el).find("h2").text(),
      product_pricing: $(el).find(".price").text(),
    });
  });

  console.log(products);
};

parseHTML();

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

Метод find() Cheerio чрезвычайно упрощает поиск и выборку любого элемента. Например, найти ссылки на продукты на странице — несложная задача, и ее можно выполнить, запустив $(el).find(“a”).attr(“href”).

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

Ознакомьтесь с этой документацией, чтобы узнать больше о Cheerio.

JSDOM

JSDOM — это реализация JavaScript, в частности, стандартов DOM и HTML. Его цель — предоставить вам возможность создавать HTML-документы и манипулировать ими для тестирования реальных приложений. Он работает не только как парсер, но и как веб-браузер.

Ключевые особенности, связанные с JSDOM:

Рендеринг на стороне сервера. Одной из наиболее распространенных задач, для которых используется JSDOM, является рендеринг на стороне сервера. Он позволяет разработчикам отображать HTML на сервере и отправлять его клиенту для улучшения SEO и производительности веб-сайта.
Выполнение сценариев. Вы можете выполнять сценарии в JSDOM, что позволяет разработчикам изменять содержимое веб-страницы и получать доступ к API-интерфейсам веб-платформы, которые реализует JSDOM.
Безголовый браузер. JSDOM не может отображать визуальный контент, но может действовать как автономный браузер, который в дальнейшем можно использовать для задач веб-автоматизации.

Давайте попробуем парсить тот же сайт, который мы использовали в предыдущем разделе. Но сначала нам нужно установить эту библиотеку.

npm i jsdom

Вот полный код:

const unirest = require("unirest");
const { JSDOM } = require("jsdom");

const getHTML = async (url) => {
  const response = await unirest.get(url);

  if (response.status == 200) {
    return response.body;
  }
};

const parseHTML = async () => {

    const url = "https://scrapeme.live/shop/";

    const html = await getHTML(url);

    const dom = new JSDOM(html);
    const { document } = dom.window;

    const products = [];

    document.querySelectorAll("li.product").forEach((el) => {
      products.push({
        product_names: el.querySelector("h2").textContent,
        product_pricing: el.querySelector(".price").textContent,
      });
    });

    console.log(products);
};

parseHTML();

Теперь вы знаете функцию getHTML. Давайте обсудим, что мы делаем в асинхронной функции parseHTML с использованием JSDOM:

После извлечения содержимого HTML мы создали экземпляр JSDOM, передав содержимое HTML в JSDOM(JSDOM(html)).
Затем мы извлекли объект документа, представляющий DOM HTML-страницы, из свойства окна JSDOM.
Затем мы инициализировали массив продуктов и использовали функцию document.querySelectorAll() для перебора всех продуктов и получения необходимой информации.

Это было основное использование JSDOM. Если вы хотите узнать больше, пожалуйста, ознакомьтесь с этой документацией.

HTMLParser2

HTMLParser2 — это быстрый анализатор HTML на основе потоков, который может эффективно обрабатывать большие HTML-документы. Однако он отличается от HTMLparser и не должен быть связан.

Запустите следующую команду, чтобы установить эту библиотеку.

npm i htmlparser2

Эту библиотеку можно использовать для анализа данных HTML следующим образом.

const unirest = require("unirest");
const htmlparser = require("htmlparser2");

const getHTML = async (url) => {
  const response = await unirest.get(url);

  if (response.status == 200) {
    return response.body;
  }
};

const parseHTML = async () => {
    
    const url = "https://scrapeme.live/shop/";

    const html = await getHTML(url);

    const products = [];
    let product = {};

    const parser = new htmlparser.Parser({
        onopentag(name, attributes) {
          if (name === 'h2' && attributes.class === 'woocommerce-loop-product__title') {
            parser._tag = 'title';
            product = {};
          }
          if (name === 'span' && attributes.class === 'price') {
            parser._tag = 'price'; 
          }
        },
        ontext(text) {
          if (parser._tag === 'title') {
            product.title = text.trim();
          }
          if (parser._tag === 'price') {
            product.price = text.trim();
          }
        },
        onclosetag(name) {
          if (name === 'h2' && parser._tag === 'title') {
            products.push(product);
            product = {}; 
          }
          if (name === 'span' && parser._tag === 'price') {
            parser._tag = ''; // Reset the price flag
          }
        }
      }, { decodeEntities: true });
    
    parser.write(html);
    parser.end();
    console.log(products);
};

parseHTML();

Пошаговое объяснение:

Сначала мы импортировали обе библиотеки, необходимые для выполнения этой задачи.
После этого мы создали асинхронную функцию getHTML для извлечения данных HTML, о которой я уже говорил.
Затем мы создали еще одну асинхронную функцию parseHTML для выполнения задач, связанных с синтаксическим анализом. Мы также инициализировали URL-адрес и вызвали функцию getHTML для получения содержимого HTML.
Затем мы создали экземпляр htmlparser для анализа содержимого HTML.
Если встречается opentag, мы проверяем, является ли тег элементом h2 с классом woocommerce-loop-product__title. Если это правда, мы инициализируем объект продукта и свойство _tag parser значением title. Если это тег span с классом price, то мы устанавливаем для свойства _tag парсера значение price.
Когда наш парсер обнаруживает текстовое содержимое внутри HTML-элемента, мы проверяем, равно ли свойство парсера «title», то есть открыли ли мы название продукта. Если это правда, то мы сохраняем текстовый контент как название продукта. Мы использовали тот же метод для извлечения цен, но с другим свойством _tag синтаксического анализатора.
Затем функция onclosetag выполняется, когда мы встречаем закрывающий тег HTML. Проверяем, является ли это тегом h2; если да, то мы помещаем данные о продукте в массив продуктов и повторно инициализируем значение объекта продукта, чтобы сохранить данные для следующих продуктов. Если мы встретим тег span, мы сбрасываем значение parser._tag, чтобы остановить процесс сбора данных.
После этого мы использовали метод parser.write(), чтобы начать процесс анализа извлеченных данных HTML.
Наконец, мы завершаем процесс анализа, вызывая метод parser.end().

HTMLParser2 имеет широкую поддержку сообщества и отличную документацию. Однако, в отличие от Cheerio JS, новичкам может быть сложно его изучить, и для выполнения конкретной задачи требуется писать больше кода.

DOMParser

DOMParser — это встроенная библиотека JavaScript для анализа документов HTML и XML. Все современные браузеры поддерживают этот парсер.

Плюсы:

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

Минусы:

Это относительно медленнее по сравнению со сторонними библиотеками, такими как Cheerio JS.
Обработка ошибок сравнительно не хороша.
Ограниченная поддержка сообщества.

Вот код для использования этой библиотеки:

const unirest = require("unirest");
const cheerio = require("cheerio");

const getHTML = async(url) => {

    const response = await unirest.get(url);

    if(response.status == 200){
        return response.body
    }
}


const parseHTML = async () => {
    const url = "https://scrapeme.live/shop/";
  
      const html = await getHTML(url);
  
      // Create a DOMParser instance
      const parser = new DOMParser();
  
      // Parse the HTML content
      const doc = parser.parseFromString(html, "text/html");
  
      const products = [];
  
      // Query the parsed document using standard DOM methods
      const productElements = doc.querySelectorAll("li.product");
  
      productElements.forEach((el) => {
        products.push({
          product_names: el.querySelector("h2").textContent,
          product_pricing: el.querySelector(".price").textContent,
        });
      });
  
      console.log(products);
  };
  
parseHTML();

Заключение

В этом уроке мы обсудили различные парсеры HTML в Node JS. Выбор лучшего из них будет зависеть от требований вашего проекта.

Если бы меня спросили лично, я бы выбрал Cheerio из-за простоты использования, эффективности и более высокой скорости работы.

Если вы считаете, что мы можем выполнить ваши задачи по парсингу веб-страниц, вы можете зарегистрироваться для использования нашего API парсинга веб-страниц. Если вам нужна помощь с извлечением данных, пожалуйста, свяжитесь с нами.

Я надеюсь, что это руководство дало вам полный обзор парсинга веб-страниц с помощью Node JS и JavaScript. Пожалуйста, не стесняйтесь написать мне, если я что-то пропустил. Подпишись на меня в Твиттере". Спасибо за прочтение!

Дополнительные ресурсы

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