Что такое веб-скрапинг?
Веб-скрапинг — это процесс извлечения содержимого и данных с веб-сайта. Это может помочь вам автоматизировать процесс извлечения информации с других веб-сайтов для использования в ваших собственных проектах. Многие отрасли используют парсинг для анализа рынка, сравнения цен и машинного обучения.
Как это работает?
Обычно это включает в себя выполнение запроса к определенной веб-странице, чтение 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=srfs
3?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=srfs
3?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, парсер сломается и устареет. Удачного скрейпинга!