JavaScript

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

Что такое веб-скрапинг?

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

Обычно его используют в тех случаях, когда нужные веб-сайты не предоставляют API для извлечения данных. Рассмотрим несколько общих сценариев использования инструментов веб-скрапинга:

  1. Скрапинг почтовых ящиков (emails)потенциальных клиентов с различных веб-сайтов.
  2. Скрапинг новостей с новостных сайтов.
  3. Скрапинг данных о товарах с коммерческих веб-сайтов.

Зачем нужен веб-скрапинг, когда коммерческие веб-сайты предоставляют API для извлечения/сбора данных о товарах?

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

Сайты, которые занимаются сравнением различной продукции, обычно пользуются веб-скрапингом. Даже поисковая система Google использует автоматическое сканирование и скрапинг, чтобы индексировать результаты поиска.

Что нам понадобится?

Начать скрапить данные не так уж и сложно. Весь процесс разделен на два простых этапа:

  1. Выборка данных с помощью HTTP-запроса
  2. Извлечение важных данных с помощью парсинга HTML DOM

Для веб-скрапинга мы будем использовать Node.JS.

Также нам понадобятся два модуля npm с открытым исходным кодом:

  • axios — библиотека с поддержкой промисов, работающая на HTTP-клиенте для браузера и node.js.
  • cheerio — это аналог jQuery для работы с Node.js. Cheerio позволяет легко выбирать, редактировать и просматривать элементы DOM.

Установка

Установка довольно проста. Нужно создать новую папку и запустить команду внутри этой папки, чтобы создать файл package.json. Будем следовать простой рецептуре, чтобы в итоге наше блюдо получилось восхитительным.

npm init -y

Прежде чем начать приготовление, нужно собрать ингредиенты для нашего рецепта. Добавьте Axios и Cheerio из npm в качестве зависимостей.

npm install axios cheerio

Теперь включите их в файле `index.js`

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

Делаем запрос

Ингредиенты для нашего блюда готовы, приступим к приготовлению. Будем извлекать данные с сайта HackerNews. Для этого потребуется сделать HTTP-запрос, чтобы получить содержимое веб-сайта. Для этого будем использовать axios.

Ответ будет выглядеть таким образом:

<html op="news">
<head>
<meta name="referrer" content="origin">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="news.css?oq5SsJ3ZDmp6sivPZMMb">
<link rel="shortcut icon" href="favicon.ico">
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss">
<title>Hacker News</title>
</head>
<body>
<center>
<table id="hnmain" border="0" cellpadding="0" cellspacing="0" width="85%" bgcolor="#f6f6ef">
.
.
.
</body>
<script type='text/javascript' src='hn.js?oq5SsJ3ZDmp6sivPZMMb'></script>
</html>

Мы получаем аналогичный HTML-контент, который отображается при запросе из Chrome или любого другого браузера. Теперь нам понадобятся Chrome Developer Tools для поиска по HTML-странице и выбора необходимых данных.

Извлекаем новостные заголовки и связанные с ними ссылки. Можно просмотреть HTML-страницы, нажав правой кнопкой мыши в любом месте веб-страницы и выбрав “Inspect”.

Парсинг HTML с помощью Cheerio.js

Cheerio представляет собой аналог jQuery для работы с Node.js, для выбора тегов HTML-документа используются селекторы. Синтаксис селектора был заимствован из jQuery. Ищем селектор заголовков новостей и ссылку на него с помощью Chrome DevTools. Добавим немного специй в наше блюдо.

Парсинг HTML с помощью Cheerio.js

В первую очередь нужно подгрузить нужный HTML. Этот шаг в jQuery является скрытым, поскольку jQuery работает на одной встроенной DOM. Теперь в Cheerio нужно передать HTML-документ. После загрузки HTML, нужно повторить все строки таблицы <tr>, чтобы извлечь каждую новость на странице.

Выходные данные будут выглядеть следующим образом:

[
{
title: 'Malaysia seeks $7.5B in reparations from Goldman Sachs (reuters.com)',
link: 'https://www.reuters.com/article/us-malaysia-politics-1mdb-goldman/malaysia-seeks-7-5-billion-in-reparations-from-goldman-sachs-ft-idUSKCN1OK0GU'
},
{
title: 'The World Through the Eyes of the US (pudding.cool)',
link: 'https://pudding.cool/2018/12/countries/'
},
.
.
.
]

Мы получили массив объекта JavaScript, содержащий название и ссылки на новости с сайта HackerNews. Таким способом можно извлекать данные с большого количества различных веб-сайтов. А тем временем наше блюдо готово и выглядит очень аппетитно.

Заключение

Мы разобрались в том, что такое веб-скрапинг и как использовать его для автоматизации операций по сбору данных с различных сайтов.

Многие веб-сайты используют архитектуру одностраничных приложений (SPA) для динамического создания контента на своих веб-сайтах с помощью JavaScript. Мы можем получить ответ от первоначального HTTP-запроса и не можем запустить javascript для визуализации динамического содержимого с помощью axios и других подобных пакетов npm, таких как request. Следовательно, извлекать данные можно только из статических веб-сайтов.

Перевод статьи Ankit JainHow to Perform Web-Scraping using Node.js