Узнайте, как легко получать данные с любой веб-страницы (API не требуется), используя Node.js, Express, Axios и Cheerio.

Есть бесконечное количество причин, по которым мы хотели бы использовать определенные данные с разных типов веб-страниц в Интернете, но на самом деле мы не знаем, как использовать эти конкретные данные в наших личных целях, особенно из-за отсутствия подходящего API. < br /> К счастью для нас, есть отличное и довольно простое решение без использования каких-либо API, называемое веб-скрапингом.

В этом руководстве я расскажу обо всех основных шагах, которые вам нужно будет выполнить, чтобы получить соответствующую информацию и данные из Интернета в ваши (образные) руки, путем очистки Интернета с помощью Node.js, Express, Axios и Cheerio.

Погодите, а что такое парсинг веб-страниц?

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

Существует множество различных способов очистки Интернета, и это можно сделать с помощью языков программирования, таких как JavaScript или Python, и таких библиотек, как Cheerio, Soup и Puppeteer.

Весь процесс в 3 этапа

Весь процесс парсинга веб-страниц можно объяснить тремя простыми шагами:

  1. Самый первый шаг - понять и найти соответствующие HTML-теги данных, которые вы хотите очистить с определенной веб-страницы.
    Для этого вам нужно будет проверить HTML-код той же веб-страницы (например, с помощью Chrome DevTool) и найти эти HTML-теги.
  2. Второй шаг - выбрать язык программирования, на котором вы хотите кодировать, и соответствующие библиотеки для вашего приложения для очистки веб-страниц, в нашем случае - Node.js, Express и Cheerio, и очистить данные, установив те же теги HTML из первый шаг, о котором мы упоминали ранее.
  3. Последний шаг - получить данные о желании с веб-страницы (то есть через запрос Axios), как мы это делали на втором шаге, загрузить их через библиотеку Cheerio и использовать по своему усмотрению.

Сегодня в нашем коротком и простом примере мы соберем список всех команд НБА из статьи в Википедии.

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

Начнем с основ

Очистка веб-страниц в основном основана на понимании тегов HTML, jQuery и JavaScript.
Следовательно, мы должны понимать, какие теги HTML нам понадобятся для извлечения всех необходимых данных.
Для этого мы будем использовать Chrome DevTools.

Давайте откроем следующую ссылку на Википедию, а затем Chrome DevTools,
щелкнув правой кнопкой мыши элемент (данные), который мы хотим извлечь,
(в нашем случае заголовок статьи), а затем нажмите проверить (см. ниже).

Теперь мы находимся внутри Chrome DevTools, где можем увидеть HTML-код веб-страницы.

Если вы присмотритесь, становится ясно, что тег <h1> отмечен голубым, что означает, что это тег элемента, который мы специально проверили (заголовок статьи).

Реальная сделка

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

  • Важное примечание: если вы никогда раньше не устанавливали npm, вам следует сделать это в первую очередь.

а. Начать новый проект

Создайте новую папку для нашего проекта приложения для очистки веб-страниц и назовите ее по своему усмотрению. Внутри папки проекта создайте новый файл с именем app.js.
Вы можете сделать это, щелкнув правой кнопкой мыши, или вы можете создать новый файл с помощью командной строки, набрав следующую строку:

touch app.js

Теперь мы должны установить и потребовать зависимости, которые мы будем
использовать сегодня - Express, Axios и Cheerio.
Для этого откройте командную строку и введите следующую строку:

npm install --save express axios cheerio

Затем потребуйте зависимости, которые мы только что установили, внутри файла app.js и инициируйте запрос get, как показано ниже:

const express = require("express")
const axios = require("axios")
const cheerio = require("cheerio")
app.const app = express();
app.set("view engine");
app.use(express.static(__dirname + "/public"));
app.get("/", function(req, res) {
})

б. Создать запрос с помощью Axios

Теперь, когда мы создали новый проект, установили зависимости и потребовали их, пришло время создать наш первый запрос с помощью Axios.

  • В целях пояснения Axios получает URL-адрес в качестве входных данных и возвращает обещание (разрешить или отклонить).
  • Если вы не знаете, как работает Promise, вы можете легко найти множество объяснений и руководств по нему в Google или на YouTube.

Хорошо, давайте вернемся к нашему примеру.
Внутри запроса get создайте запрос с помощью Axios с нашим URL-адресом в Википедии в качестве входных данных, а затем с помощью Cheerio мы загрузим HTML-ответ (HTML-код веб-страницы).

  • Обратите внимание, что Cheerio реализует подмножество основного jQuery.
    Cheerio удаляет все несоответствия DOM и мусор браузера из библиотеки jQuery, раскрывая свой поистине великолепный API.
axios.get("https://en.wikipedia.org/wiki/National_Basketball_Association")
.then((response) => {
    const html = response.data;
    const $ = cheerio.load(html);
  • Как видите, я использовал функцию стрелки.
    Если вы не понимаете, как работает стрелочная функция, просто замените ее следующей строкой кода:
.then(function(response) {

Поздравляю! мы успешно получили HTML-код статьи с помощью Axios, единственное, что нам осталось сделать, это извлечь соответствующие данные, которые мы хотим использовать, указав точные HTML-теги с помощью знака $.

let title = $("#firstHeading").text();
let teams = [];
for (let i = 0; i < 30; i++) {
   teams.push($('td > b > a', html)[i].attribs.title);
}

Используя знак $ (селектор запроса), мы успешно получили элемент заголовка статьи, который имеет идентификатор #firstHeading.
Кроме того, мы использовали метод .text() для извлечения текста внутри того же элемента.

Теперь, чтобы получить список всех команд НБА, мы создали for цикл, который проходит через 30 <td> элементов и извлекает каждый из их <a> дочерних элементов, которые имеют title атрибуты, и сохраняет каждый из них внутри переменной array. мы создали, называется teams.

c. Собираем все вместе

Идеально! Теперь давайте соберем весь код вместе и покажем наши результаты:

const express = require("express")
const axios = require("axios")
const cheerio = require("cheerio")
app.const app = express();
app.set("view engine");
app.use(express.static(__dirname + "/public"));
app.get("/", function(req, res) {
 axios.get("https://en.wikipedia.org/wiki/National_Basketball_Associ       ation")
.then((response) => {
    const html = response.data;
    const $ = cheerio.load(html);
    const title = $("#firstHeading").text();
    const teams = [];
    for (let i = 0; i < 30; i++) {
       teams.push($('td > b > a', html)[i].attribs.title);
    }
    console.log(title);
    console.log(teams);
res.send(teams);
})

Выход:

Резюме

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

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

Спасибо за чтение,

Ноам Канонич