Узнайте, как легко получать данные с любой веб-страницы (API не требуется), используя Node.js, Express, Axios и Cheerio.
Есть бесконечное количество причин, по которым мы хотели бы использовать определенные данные с разных типов веб-страниц в Интернете, но на самом деле мы не знаем, как использовать эти конкретные данные в наших личных целях, особенно из-за отсутствия подходящего API. < br /> К счастью для нас, есть отличное и довольно простое решение без использования каких-либо API, называемое веб-скрапингом.
В этом руководстве я расскажу обо всех основных шагах, которые вам нужно будет выполнить, чтобы получить соответствующую информацию и данные из Интернета в ваши (образные) руки, путем очистки Интернета с помощью Node.js, Express, Axios и Cheerio.
Погодите, а что такое парсинг веб-страниц?
Веб-скрапинг - это замечательный метод, который позволяет нам извлекать данные прямо из HTML-кода веб-страницы, без какого-либо использования формального API.
Существует множество различных способов очистки Интернета, и это можно сделать с помощью языков программирования, таких как JavaScript или Python, и таких библиотек, как Cheerio, Soup и Puppeteer.
Весь процесс в 3 этапа
Весь процесс парсинга веб-страниц можно объяснить тремя простыми шагами:
- Самый первый шаг - понять и найти соответствующие HTML-теги данных, которые вы хотите очистить с определенной веб-страницы.
Для этого вам нужно будет проверить HTML-код той же веб-страницы (например, с помощью Chrome DevTool) и найти эти HTML-теги. - Второй шаг - выбрать язык программирования, на котором вы хотите кодировать, и соответствующие библиотеки для вашего приложения для очистки веб-страниц, в нашем случае - Node.js, Express и Cheerio, и очистить данные, установив те же теги HTML из первый шаг, о котором мы упоминали ранее.
- Последний шаг - получить данные о желании с веб-страницы (то есть через запрос 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.
Мы всегда должны помнить, что мы можем использовать полученные данные, поскольку мы желание!
Я уверен, что вы, наверное, уже понимаете, насколько просто веб-парсинг.
Как я уже говорил, вы можете использовать веб-парсинг для извлечения практически любых данных практически с любой веб-страницы в Интернете.
Единственное, что вам нужно сделать, это выполнить те три простых шага, которые мы узнали сегодня.
Спасибо за чтение,
Ноам Канонич