RU
EN
ES
ZH
FR
DE
PT
AR
HI
Что такое Cheerio и зачем он нужен?
Cheerio — это быстрая, гибкая и легковесная библиотека для парсинга HTML и XML на серверной стороне Node.js. Она предоставляет разработчикам мощный jQuery-подобный синтаксис для навигации, поиска и манипуляции DOM-деревом. Если вы когда-либо работали с jQuery в браузере, то Cheerio покажется вам интуитивно понятным — Cheerio реализует подмножество jQuery, адаптированное для серверного использования.
Основные сценарии использования Cheerio:
- Веб-скрапинг (Web Scraping): Извлечение данных с веб-страниц (цены, заголовки новостей, контент статей).
- Тестирование: Проверка структуры HTML-шаблонов в юнит-тестах без реального браузера.
- Препроцессинг HTML: Очистка, трансформация и извлечение частей HTML-документов перед отправкой клиенту.
- Парсинг RSS/XML фидов: Обработка XML-документов, хотя для XML есть более специализированные инструменты.
В отличие от полноценного браузерного движка (например, Puppeteer или Playwright), Cheerio не рендерит JavaScript, не загружает CSS, изображения или внешние ресурсы. Это делает его чрезвычайно быстрым и экономным по памяти. Cheerio работает с уже готовой строкой HTML, которую вы получаете, например, через HTTP-запрос (с помощью axios, node-fetch или встроенного http/https модуля).
Установка Cheerio
Установка Cheerio в проект Node.js выполняется через менеджер пакетов npm (или yarn). Откройте терминал в корне вашего проекта и выполните:
npm install cheerioЕсли вы используете yarn:
yarn add cheerioПосле установки вы сможете импортировать библиотеку в свой код:
const cheerio = require('cheerio');
// или для ES-модулей:
// import * as cheerio from 'cheerio';Обратите внимание: Cheerio — это библиотека для Node.js, и она не предназначена для работы в браузере. Если вам нужно парсить HTML на клиентской стороне, лучше использовать нативный DOMParser.
Быстрый старт: первый пример
Давайте напишем простейший скрипт, который загружает HTML-строку, находит в ней все ссылки и выводит их тексты и атрибуты href.
const cheerio = require('cheerio');
// Пример HTML-кода (обычно вы получаете его через HTTP-запрос)
const html = `
<html>
<head><title>Пример страницы</title></head>
<body>
<h1>Добро пожаловать!</h1>
<ul>
<li><a href="https://example.com">Ссылка 1</a></li>
<li><a href="https://google.com">Ссылка 2</a></li>
<li class="special"><a href="https://github.com">Ссылка 3</a></li>
</ul>
</body>
</html>
`;
// Загружаем HTML в Cheerio
const $ = cheerio.load(html);
// Находим все теги <a> и перебираем их
$('a').each((index, element) => {
const text = $(element).text(); // Текст внутри тега
const href = $(element).attr('href'); // Значение атрибута href
console.log(`${index + 1}. ${text} - ${href}`);
});
// Результат:
// 1. Ссылка 1 - https://example.com
// 2. Ссылка 2 - https://google.com
// 3. Ссылка 3 - https://github.comКак видите, синтаксис очень похож на jQuery: мы используем функцию $() для выборки элементов, а затем применяем методы .text(), .attr(), .each() для работы с ними.
Основные методы и функции Cheerio
Ниже приведен подробный разбор 10 ключевых методов Cheerio с описанием, параметрами и примерами.
1. cheerio.load(html, options?)
Что делает: Загружает HTML-строку и возвращает главную функцию $, через которую вы взаимодействуете с DOM. Это точка входа в библиотеку.
Параметры:
html(string) — HTML-код для парсинга.options(object, необязательно) — объект конфигурации. Например,{ xmlMode: true }для парсинга XML,{ decodeEntities: false }для отключения декодирования HTML-сущностей.
Пример:
const $ = cheerio.load('<div class="content">Hello</div>');
console.log($('.content').text()); // Hello2. $(selector, context?)
Что делает: Основная функция выборки элементов по CSS-селектору. Возвращает объект Cheerio, содержащий найденные элементы. Можно передать второй аргумент — контекст (DOM-элемент или другой объект Cheerio) для сужения поиска.
Параметры:
selector(string | element | Cheerio) — CSS-селектор, строка HTML, DOM-элемент или другой объект Cheerio.context(element | Cheerio, необязательно) — контекст для поиска.
Пример:
const $ = cheerio.load('<ul><li class="item">1</li><li class="item active">2</li></ul>');
const items = $('li.item'); // Выбираем все <li> с классом "item"
console.log(items.length); // 2
// Поиск внутри конкретного элемента
const firstItem = $('li').first();
const activeItems = $('.active', firstItem.parent()); // Поиск .active внутри родителя первого li
console.log(activeItems.text()); // 23. .text(content?)
Что делает: Если вызван без аргументов — возвращает объединенный текстовый контент всех выбранных элементов (включая дочерние). Если передан аргумент — устанавливает текстовое содержимое для каждого выбранного элемента, заменяя все дочерние узлы.
Параметры:
content(string | number | boolean | function, необязательно) — новый текст. Если передана функция, она получает индекс и текущий текст, а возвращаемое значение становится новым текстом.
Пример:
const $ = cheerio.load('<p>Привет, <b>мир</b>!</p>');
console.log($('p').text()); // "Привет, мир!"
// Установка нового текста
$('p').text('Новый текст');
console.log($('p').html()); // "Новый текст" (тег <b> удален)4. .html(content?)
Что делает: Без аргументов возвращает HTML-содержимое первого выбранного элемента (включая его дочерние узлы). С аргументом — заменяет HTML-содержимое всех выбранных элементов.
Параметры:
content(string | function, необязательно) — новый HTML-код. Если передана функция, она получает индекс и текущий HTML.
Пример:
const $ = cheerio.load('<div><span>Старый</span></div>');
console.log($('div').html()); // "<span>Старый</span>"
$('div').html('<strong>Новый</strong>');
console.log($('div').html()); // "<strong>Новый</strong>"5. .attr(name, value?)
Что делает: Без второго аргумента возвращает значение атрибута name для первого выбранного элемента. Со вторым аргументом устанавливает значение атрибута для всех выбранных элементов. Можно передать объект для установки нескольких атрибутов.
Параметры:
name(string | object) — имя атрибута или объект {key: value}.value(string | number | null | function, необязательно) — новое значение. Еслиnull— удаляет атрибут.
Пример:
const $ = cheerio.load('<a href="https://site.com" data-id="123">Ссылка</a>');
console.log($('a').attr('href')); // "https://site.com"
console.log($('a').attr('data-id')); // "123"
// Установка атрибута
$('a').attr('target', '_blank');
console.log($('a').attr('target')); // "_blank"
// Удаление атрибута
$('a').attr('data-id', null);
console.log($('a').attr('data-id')); // undefined6. .addClass(className) / .removeClass(className) / .hasClass(className)
Что делает: Управление CSS-классами. addClass добавляет один или несколько классов (через пробел). removeClass удаляет классы. hasClass проверяет наличие класса у первого элемента.
Параметры:
className(string) — имя класса или список классов через пробел.
Пример:
const $ = cheerio.load('<div class="box"></div>');
const div = $('div');
div.addClass('active highlighted');
console.log(div.attr('class')); // "box active highlighted"
console.log(div.hasClass('active')); // true
div.removeClass('highlighted');
console.log(div.attr('class')); // "box active"7. .find(selector)
Что делает: Ищет элементы, соответствующие селектору, среди потомков текущего набора элементов. Очень похоже на $(selector, context), но более явное.
Параметры:
selector(string | Cheerio | element) — CSS-селектор.
Пример:
const $ = cheerio.load('<div class="container"><p>Текст</p><span>Спан</span></div>');
const container = $('.container');
const paragraphs = container.find('p');
console.log(paragraphs.text()); // "Текст"8. .each(function(index, element))
Что делает: Итерирует по всем элементам в текущем наборе Cheerio. Функция обратного вызова получает индекс элемента и сам DOM-элемент (не обернутый в Cheerio). Внутри функции this ссылается на элемент, обернутый в Cheerio.
Параметры:
function(index, element)— функция, выполняемая для каждого элемента.
Пример:
const $ = cheerio.load('<ul><li>A</li><li>B</li><li>C</li></ul 
