Часть 2: Разбор HTML-кода веб-сайта с помощью NodeJS и cheerio

Привет, снова здесь! Если вы пропустили первую часть серии о том, как создать селектор для HTML-данных, пожалуйста, ознакомьтесь с ней! В противном случае, давайте перейдем к автоматическому разбору данных!

Начнем с создания нового проекта. Откройте терминал и введите следующую команду, чтобы создать проект NodeJS.

mkdir web-data-retrieve && cd web-data-retrieve && npm init

После этого добавим got (клиент для HTTP-запросов) и cheerio (эквивалент jQuery для NodeJS). Первый будет использоваться для запроса содержимого, а второй для его разбора.

npm install --save cheerio got

Теперь создадим файл index, который будет содержать наш код.

touch index.js

Откройте файл index.js и добавьте в него следующий код:

const cheerio = require('cheerio');
const got = require('got');

const url = 'https://www.marketwatch.com/investing/stock/aapl/financials';

(async () => {
    try {
        const response = await got(url);
        const $ = cheerio.load(response.body);
        const selected = $('.financials tr.partialSum:nth-child(1) td.valueCell');
        const cellData = selected.toArray().map(cell => cell.firstChild.data);
        console.log(cellData);
    } catch (error) {
        console.log(error.response.body);
    }
})();

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

const cheerio = require('cheerio');
const got = require('got');

Следующая строка содержит URL, с которого мы будем получать содержимое, он идентичен URL в браузере.

const url = 'https://www.marketwatch.com/investing/stock/aapl/financials';

Следующая строка немного сложнее, это обертка, которая позволяет нам использовать асинхронные функции. Чтобы понять это подробнее, лучше пройти другое руководство :). Более интересная часть происходит внутри нее!

Первая строка вызывает библиотеку got с URL, который был определен в начале нашего файла. Ответ сохраняется в переменной response.

try {
        **const response = await got(url)**;
        const $ = cheerio.load(response.body);
        const selected = $('.financials tr.partialSum:nth-child(1) td.valueCell');
        const cellData = selected.toArray().map(cell => cell.firstChild.data);
        console.log(cellData);
} catch (error) {
        console.log(error.response.body);
}

После этого response будет загружен с помощью cheerio. Он предоставляет нам оператор запроса, аналогичный тому, который использовался с jQuery в браузере.

try {
        const response = await got(url);
        **const $ = cheerio.load(response.body)**;
        const selected = $('.financials tr.partialSum:nth-child(1) td.valueCell');
        const cellData = selected.toArray().map(cell => cell.firstChild.data);
        console.log(cellData);
} catch (error) {
        console.log(error.response.body);
}

Затем следует использование нашего селектора, который мы создали ранее в браузере. Он вернет нам выбранные элементы.

try {
        const response = await got(url);
        const $ = cheerio.load(response.body);
        **const selected = $('.financials tr.partialSum:nth-child(1) td.valueCell')**;
        const cellData = selected.toArray().map(cell => cell.firstChild.data);
        console.log(cellData);
} catch (error) {
        console.log(error.response.body);
}

Последняя волшебная строка в блоке try преобразует выбранные данные в стандартный массив JS, что позволяет нам пройтись по нему с помощью map. Внутри map мы берем первый дочерний элемент и смотрим его данные.

try {
        const response = await got(url);
        const $ = cheerio.load(response.body);
        const selected = $('.financials tr.partialSum:nth-child(1) td.valueCell');
        **const cellData = selected.toArray().map(cell => cell.firstChild.data)**;
        console.log(cellData);
} catch (error) {
        console.log(error.response.body);
}

Приложение выведет данные о продажах акций Apple:

# node index.js
[ '231.28B', '214.23B', '228.57B', '265.81B', '259.97B' ]

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