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

Веб-скрапинг — это процесс извлечения содержимого и данных с веб-сайта. Это может помочь вам автоматизировать процесс извлечения информации с других веб-сайтов для использования в ваших собственных проектах. Многие отрасли используют парсинг для анализа рынка, сравнения цен и машинного обучения.

Как это работает?

Обычно это включает в себя выполнение запроса к определенной веб-странице, чтение HTML-кода и выбор определенных элементов для сбора данных.

Давайте создадим простой парсер.

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

См. репозиторий здесь: GitHub

Необходимые инструменты: Node.js, npm, редактор кода (например, VS Studio) и браузер (например, Chrome).

Откройте терминал и перейдите в каталог, в котором вы хотите сохранить свою работу.

cd <workdirectoryname>

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

mkdir webscraper

cd в новый каталог.

cd webscraper

Создайте файл .js.

touch scraper.js

Установите axios, выполнив следующую команду.

npm i axios

Axios — это простой HTTP-клиент на основе обещаний для браузера и node.js. Прочтите документацию axios для получения дополнительной информации.

Установите Cheerio, выполнив следующую команду.

npm i cheerio

Cheerio анализирует разметку и предоставляет API для обхода/манипулирования результирующей структурой данных. Прочтите документацию Cheerio для получения дополнительной информации.

Откройте scraper.js в предпочитаемом вами редакторе кода.

Сначала загрузите зависимости.

// Dependecies
const axios = require("axios");
const cheerio = require("cheerio");
const fs = require("fs");

fs ~ Модуль файловой системы

Выберите страницу, которую хотите очистить. Скопируйте URL-адрес и сохраните его в переменной.

// URL
const url = "https://www.amazon.com/Oculus-Quest-Advanced-All-One-Virtual/dp/B099VMT8VZ/ref=srfs3?crid=2XOPRGLK0DPJ7&keywords=oculus&qid=1649201433&sprefix=oculus%2Caps%2C75&sr=8-3";

Давайте создадим объект для хранения информации, которую мы будем очищать.

const product = {name: "",image:"",price:"", link:""};

Вернитесь на веб-страницу и попытайтесь понять, как структурирована информация. Для этого щелкните правой кнопкой мыши в любом месте веб-сайта и выберите опцию «Проверить». Это откроет DevTools.

Нажмите на вкладку элементы. Проверьте элементы и скопируйте нужные селекторы.

Как только мы определили селекторы, которые будем использовать, мы можем написать нашу асинхронную функцию.

async function scrape() {
try {
// Fetch HTML
const { data } = await axios.get(url);
// Load HTML
const $ = cheerio.load(data);
// Select div items
const item = $("div#dp-container");
// Populate the product object with the selected elements
product.name = $(item).find('h1 span#productTitle').text();
product.image = $(item).find('img#landingImage').attr('src');
product.price = $(item).find('div span#priceblock_ourprice').text();
product.link = url
} catch (err) {
console.error(err);
}
}

$()ищет любые элементы, соответствующие предоставленному селектору

Метод ()find возвращает элементы-потомки выбранного элемента.

Мы используем axios для получения HTML, а затем используем метод cheerio.load для его загрузки. Далее выбираем тег div, в котором находятся остальные нужные нам элементы, и ищем потомков методом .find, возвращая текстовое содержимое и атрибут src, который будет храниться в объекте.

См. полный код ниже:

// Loading the dependencies
const axios = require("axios");
const cheerio = require("cheerio");
const fs = require("fs");
// URL of the page we want to scrape
const url = "https://www.amazon.com/Oculus-Quest-Advanced-All-One-Virtual/dp/B099VMT8VZ/ref=srfs3?crid=2XOPRGLK0DPJ7&keywords=oculus&qid=1649201433&sprefix=oculus%2Caps%2C75&sr=8-3";
const product = {name: "",image:"",price:"", link:""};
// Scrape function
async function scrape() {
try {
// Fetch HTML
const { data } = await axios.get(url);
// Load HTML
const $ = cheerio.load(data);
// Select div items
const item = $("div#dp-container");
// Populate the product object with the selected elements
product.name = $(item).find('h1 span#productTitle').text();
product.image = $(item).find('img#landingImage').attr('src');
product.price = $(item).find('div span#priceblock_ourprice').text();
product.link = url
// create product.json file
fs.writeFile("product.json", JSON.stringify(product, null, 2), (err) => {
if (err) {
console.error(err);
return;
}
console.log("completed");
});
} catch (err) {
console.error(err);
}
}
scrape()

Мы можем использовать метод fs.writeFile() для создания файла .json, содержащего указанные данные. Наконец, мы вызываем функцию scrape().

Теперь давайте посмотрим на наш код в действии. Мы можем запустить приведенный выше код, используя следующую команду:

node scraper.js

После того, как мы запустим наш код, в нашем каталоге webscraper будет создан файл product.json, и внутри файла мы должны увидеть очищенные данные, показанные ниже.

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

Надеюсь, вам понравилось это читать, и это помогло вам понять основы парсинга веб-страниц с использованием javascript и Node.js. Кроме того, имейте в виду, что при использовании этого метода парсинга, если изменится структура или содержимое HTML, парсер сломается и устареет. Удачного скрейпинга!