Прежде чем мы начнем, вам необходимо соблюдать местные законы и правила и не собирать данные, которые раскрываются без разрешения.
Вот некоторые вещи, которые вам понадобятся для этого руководства:
Cheerio — инструмент для анализа HTML и XML в Node.js. Он очень популярен на GitHub и имеет более 23 тысяч звезд.
Он быстрый, гибкий и простой в использовании. Поскольку он реализует подмножество JQuery, начать работу с Cheerio легко, если вы уже знакомы с JQuery.
Основное различие между Cheerio и веб-браузером заключается в том, что Cheerio не генерирует визуальный рендеринг, не загружает CSS, не загружает внешние ресурсы и не выполняет JavaScript. Он просто анализирует разметку и предоставляет API для управления полученными структурами данных. Это объясняет, почему это еще и очень быстро — документация Cheerio.
Если вы хотите использовать Cheerio для получения веб-страниц, вам нужно сначала использовать такой пакет, как axios или node-fetch, для получения тегов.
В этом примере мы будем сканировать коды ISO 3166-1 альфа-3 для всех стран и других юрисдикций, перечисленных на этой странице Википедии. Он расположен в текущем разделе кода страницы ISO 3166-1 альфа-3.
Вот как выглядит список стран/юрисдикций и соответствующие им коды:
На этом этапе вы создадите каталог для своего проекта, выполнив следующую команду на терминале. Эта команда создаст файл с именем learn-cheerio . При желании вы можете дать ему другое имя.
mkdir Learn-cheerio
learn-cheerio После успешного выполнения приведенной выше команды вы сможете увидеть папку с именем «созданная».
На следующем шаге вы откроете только что созданный каталог в своем любимом текстовом редакторе и инициализируете проект.
На этом этапе вы перейдете в каталог проекта и инициализируете проект. Откройте каталог, созданный на предыдущем шаге, в вашем любимом текстовом редакторе и инициализируйте проект, выполнив следующую команду.
npm init -y
Успешный запуск приведенной выше команды создаст файл package.json в корне каталога проекта.
На следующем шаге вы установите зависимости проекта.
На этом этапе вы установите зависимости проекта, выполнив следующую команду. Это займет несколько минут, поэтому наберитесь терпения.
npm i axioscheerio довольно
Успешное выполнение приведенной выше команды зарегистрирует три зависимости в файле в поле package.json . dependencies зависимость — это axios , вторая — cheerio , а третья — pretty .
axios — очень популярный http-клиент, который может работать на узлах и в браузерах. Нам это нужно, потому что Cheerio — это анализатор токенов.
Чтобы Cheerio мог анализировать теги и сканировать нужные вам данные, нам нужны axios для получения тегов с веб-сайта. При желании вы можете использовать другой HTTP-клиент для получения токена. Это не обязательно должен быть axios .
Pretty — это пакет npm для украшения разметки, чтобы ее можно было прочитать при печати на терминале.
В следующем разделе вы изучите теги, из которых будут извлекаться данные.
Прежде чем очищать данные с веб-страницы, важно понять ее HTML-структуру.
На этом этапе вы исследуете структуру HTML веб-страницы, с которой вы хотите извлечь данные.
Перейдите на страницу кодов ISO 3166-1 альфа-3 в Википедии. В разделе «Текущие коды» находится список стран и соответствующие им коды. CTRL + SHIFT + I Вы можете открыть DevTools, нажав комбинацию клавиш на Chrome или щелкнув правой кнопкой мыши и выбрав опцию «Проверить».
Это мой список в Chrome DevTools:
В следующем разделе вы напишете код для сканирования Интернета.
В этом разделе вы напишете код для очистки интересующих нас данных. Сначала запустите следующую команду, которая создаст файл app.js
touch app.js.
Успешное выполнение приведенной выше команды приведет к созданию файла app.js в корневом каталоге каталога проекта.
Как и любой другой пакет Node, вам необходимо сначала потребовать axios , cheerio и axios , прежде чем начинать их использовать. Вы можете сделать это, добавив следующий код в начало файла, который вы только что pretty . app.js
const axios = require("axios");
const Cheerio = require("Cheerio");
const Pretty = require("pretty"); Прежде чем писать код для очистки данных, нам нужно изучить cheerio . Мы проанализируем разметку ниже и попытаемся манипулировать полученной структурой данных. Это поможет нам изучить синтаксис Cheerio и его наиболее часто используемые методы.
Разметка ниже — это элемент ul li , содержащий наш элемент.
константная разметка = ` <ul class="фрукты"> <li class="fruits__mango"> Манго </li> <li class="fruits__apple"> Яблоко </li> </ul> `;
Добавьте приведенное выше объявление переменной в файл app.js
cheerio можете загружать теги с помощью cheerio.load . Этот метод принимает маркер в качестве параметра. Также требуются два дополнительных необязательных параметра. Если вам интересно, вы можете прочитать о них больше в документации.
Ниже мы передаем первый и единственный обязательный параметр и сохраняем возвращаемое значение в переменной $ . Мы используем эту переменную из-за сходства Cheerio с Jquery $ . Если хотите, вы можете использовать разные имена переменных.
Добавьте следующий код в файл app.js :
const $ = Cheerio.load(markup); console.log(pretty($.html()));
Если вы теперь выполните код в node app.js , выполнив команду app.js на терминале, вы сможете увидеть разметку на терминале. Вот что я вижу на терминале:
Cheerio поддерживает большинство распространенных селекторов CSS, таких как селекторы class , id и element . В приведенном ниже коде мы выбираем элемент с классом fruits__mango , а затем регистрируем выбранный элемент на консоли. Добавьте следующий код в файл app.js
const mango = $(".fruits__mango");
console.log(mango.html()); // Mango Если вы используете выполнение команды, приведенная выше строка кода запишет текст Mango на терминал. app.js``node app.js
Вы также можете выбрать элемент и получить определенные атрибуты, такие как class , id или все атрибуты и соответствующие им значения.
Добавьте следующий код в файл app.js :
const apple = $(".fruits__apple");
console.log(apple.attr("class")); // Код вышеfruit__apple выполнит вход в терминал fruits__apple . fruits__apple — класс выбранного элемента.
Cheerio предоставляет метод .each для перебора нескольких выбранных элементов.
Ниже мы выбираем все элементы и перебираем их, используя метод li . .each мы записываем текстовое содержимое каждого элемента списка на терминал.
Добавьте следующий код в файл app.js
const listItems = $("li");
console.log(listItems.length); // 2
listItems.each(function (idx, el) {
console.log($(el).text());
});
//Манго
// Приведенный выше код Apple запишет 2 — длину элемента списка. После выполнения кода на терминале отобразится текст Mango . Apple``app.js
Cheerio предоставляет возможность добавлять или добавлять элементы в разметку.
Метод append добавит элемент, переданный в качестве параметра, после последнего дочернего элемента выбранного элемента. С другой стороны, prepend добавит переданный элемент перед первым дочерним элементом выбранного элемента.
Добавьте следующий код в файл app.js :
const ul = $("ul");
ul.append("<li>Банан</li>");
ul.prepend("<li>Ананас</li>");
console.log(pretty($.html())); После добавления элементов в разметку вот что я вижу при входе в терминал $.html() :
Это основы Cheerio, которые помогут вам начать парсинг веб-страниц. Чтобы спарсить данные из Википедии, которые мы описали в начале этой статьи, скопируйте и вставьте следующий код в файл app.js :
// Загрузка зависимостей нам не нужна.
// потому что мы не будем логировать html на терминал
const axios = require("аксиос");
const Cheerio = require("Cheerio");
const fs = require("fs");
// URL страницы, которую мы хотим парсить
const url = "https://en.wikipedia.org/wiki/ISO_3166-1_alpha-3";
// Асинхронная функция, очищающая данные
асинхронная функция ScrapeData() {
пытаться {
// Получаем HTML страницы, которую хотим очистить
const {данные} = ждут axios.get(url);
// Загружаем HTML, который мы получили в предыдущей строке
const $ = Cheerio.load(данные);
// Выбираем все элементы списка в классе простого списка
const listItems = $(".plainlist ul li");
// Хранит данные для всех стран
константные страны = [];
// Используем метод .each для перебора выбранного нами li
listItems.each((idx, el) => {
// Объект, содержащий данные для каждой страны/юрисдикции
const Country = { name: "", iso3: "" };
// Выбираем текстовое содержимое элементов a и span
// Сохраняем текстовое содержимое в указанном выше объекте
страна.имя = $(эль).дети("а").текст();
Country.iso3 = $(el).children("span").text();
// Заполняем массив стран данными о стране
страны.push(страна);
});
// Записываем массив стран в консоль
console.dir(страны);
// Записываем массив стран в файл Country.json
fs.writeFile("coutries.json", JSON.stringify(countries, null, 2), (err) => {
если (ошибка) {
console.error(ошибка);
возвращаться;
}
console.log("Данные в файл успешно записаны");
});
} поймать (ошибиться) {
console.error(ошибка);
}
}
//Вызов указанной выше функции
ScrapeData(); Прочитав код, вы понимаете, что происходит? Если нет, то сейчас расскажу подробно. Я также прокомментировал каждую строку кода, чтобы вам было легче понять.
В приведенном выше коде нам нужны все зависимости в верхней части файла app.js , а затем мы объявляем функцию scrapeData . Внутри функции полученный HTML-код страницы, которую нам нужно очистить, затем загружается в cheerio с помощью axios .
Список стран и соответствующие им коды iso3 вложены в элемент div с классом plainlist . Элементы li выбираются, а затем мы перебираем их, используя метод .each . Данные по каждой стране собираются и сохраняются в массиве.
После запуска приведенного выше кода с помощью команды node app.js собранные данные записываются в файл countries.json и распечатываются на терминале. Это часть того, что я вижу на терминале:
Спасибо, что прочитали эту статью! Мы уже рассмотрели использование cheerio . Если вы хотите углубиться и полностью понять, как это работает, вы можете обратиться к документации Cheerio.