Веб-скрапинг — это процесс программного извлечения данных с веб-сайтов. Хотя многие популярные инструменты парсинга веб-страниц используют серверные технологии, такие как Python и Node.js, также можно парсить веб-страницы, используя только клиентский JavaScript. В этом посте мы рассмотрим, как использовать ваши существующие знания о Vanilla JS, чтобы начать парсинг без изучения каких-либо новых фреймворков.
Зачем использовать Scraping с помощью Vanilla JavaScript?
Вот некоторые из ключевых преимуществ парсинга с помощью Vanilla JS:
Низкий барьер для входа – Если вы уже знаете JavaScript, вы можете быстро начать парсинг веб-страниц, не изучая новый язык. Парсинг Vanilla JS требует щадящего обучения.
Фронтэнд-фокус – Для разработчиков, работающих в основном над внешними проектами, парсинг Vanilla JS позволяет повторно использовать существующие навыки.
Небольшой вес – Парсинг на стороне клиента позволяет избежать накладных расходов на настройку и обслуживание серверов для запуска парсеров.
Портативность – Парсеры Vanilla JS могут запускаться прямо в браузере, что упрощает совместное использование и развертывание парсеров.
Stealth – Веб-сайтам сложнее обнаружить и заблокировать парсинг на стороне клиента по сравнению с парсингом на стороне сервера.
Так что, если вам нужен простой способ начать извлекать данные из Интернета с помощью JavaScript, парсинг Vanilla JS — отличный вариант! Далее давайте посмотрим, как это работает под капотом.
Как работает парсинг веб-страниц на стороне клиента
Основные шаги для парсинга веб-страниц с помощью Vanilla JS:
Используйте
fetch()для загрузки HTML-кода страницы.Проанализируйте HTML с помощью DOM API, чтобы извлечь нужные данные.
Преобразуйте и сохраните извлеченные данные.
Повторите шаги 1–3 для дополнительных страниц.
Ключевым моментом является то, что все происходит непосредственно в браузере, а не на сервере. fetch() позволяет нам делать запросы на загрузку HTML, а DOM API предоставляет такие методы, как document.querySelector() проанализировать HTML и извлечь нужные данные.
Мы можем инициировать процесс очистки в любое время, запустив наш код очистки JavaScript. Логика очистки будет работать на стороне клиента и изолирована от остальной части веб-страницы в целях безопасности.
Теперь давайте посмотрим на простой пример парсера Vanilla JS в действии!
Простой пример
Допустим, мы хотим получить некоторые данные о продуктах с веб-сайта электронной коммерции. Вот как мы могли бы сделать это с помощью простого JavaScript:
// Fetch the HTML of the product page
fetch(‘https://example.com/products/1‘)
.then(response => response.text())
.then(html => {
// Parse the HTML with the DOM
const doc = new DOMParser().parseFromString(html, ‘text/html‘);
// Extract the product title
const title = doc.querySelector(‘h1.product-title‘).textContent;
// Extract the product description
const description = doc.querySelector(‘div.product-description‘).textContent;
// Extract the product price
const price = doc.querySelector(‘span.price‘).textContent;
// Store the data somewhere, e.g. log to console
const product = {
title,
description,
price
};
console.log(product);
});И это действительно все! Всего с помощью нескольких строк Vanilla JS мы смогли получить ключевые данные со страницы продукта.
Самое замечательное в этом подходе то, что он напрямую использует стандартные API-интерфейсы веб-платформы, с которыми уже знакомы интерфейсные разработчики. Никаких специальных библиотек парсинга не требуется!
Давайте углубимся в ключевые шаги немного подробнее.
Получение страниц
Первый шаг — загрузка HTML-кода страницы, которую мы хотим очистить. Современный способ выполнения HTTP-запросов из JavaScript заключается в использовании Fetch API.
Мы можем использовать fetch() чтобы загрузить HTML-код любого общедоступного URL-адреса:
fetch(‘https://example.com‘)
.then(response => response.text())
.then(html => {
// now we have the HTML of the page in the html variable
});Ассоциация fetch() Метод возвращает обещание, которое разрешается в объект Response, содержащий данные ответа. Вызов .text() в ответе возвращается обещание, которое разрешается с содержанием в виде текста.
Обеспечиваем обратный звонок .then() для запуска нашей логики очистки всякий раз, когда HTML готов.
Разбор HTML
Когда у нас есть HTML, следующим шагом будет его анализ для извлечения нужных данных. Лучшим API для программного анализа HTML-документов в браузере является DOM-API.
Мы можем преобразовать HTML-строку в документ, используя DOMParser учебный класс:
const parser = new DOMParser();
const doc = parser.parseFromString(html, ‘text/html‘);Эта doc переменная теперь содержит объект документа, представляющий проанализированный HTML.
Мы можем использовать методы DOM, такие как querySelector() для анализа и извлечения данных из документа:
// Select elements
const headers = doc.querySelectorAll(‘h2‘);
// Get text content
const headerText = headers[0].textContent;
// Get attribute values
const linkUrl = doc.querySelector(‘a.link‘).getAttribute(‘href‘);DOM API довольно обширен и позволяет программно моделировать, как человек анализирует веб-страницу в браузере.
Читать этого руководства подробнее об использовании DOM API для анализа и перемещения HTML-документов.
Хранение очищенных данных
После того как мы извлекли нужные данные со страницы, следующим шагом будет их где-нибудь сохранить. Простые варианты включают в себя:
- Вход в консоль — хорошо для отладки
- Сохранение в переменную JavaScript или структуру данных.
- Хранение в LocalStorage – сохраняется между сеансами
- Отправка на сервер через AJAX – например, для сохранения очищенных данных в базе данных.
Например:
// Log to console
console.log(extractedData);
// Store in memory
let scrapedData = [];
scrapedData.push(extractedData);
// Save to localStorage
localStorage.setItem(‘data‘, JSON.stringify(extractedData));
// Send to server
fetch(‘/api/data‘, {
method: ‘POST‘,
body: JSON.stringify(extractedData)
});Итак, это некоторые распространенные шаблоны сохранения очищенных данных на стороне клиента.
Парсинг нескольких страниц
Чтобы парсить несколько страниц, мы заключаем нашу логику парсинга в функцию, которую можно вызывать итеративно:
async function scrapePage(url) {
// Fetch HTML
// Parse HTML
// Extract data
// Store data
}
const urls = [
‘https://example.com/page1‘,
‘https://example.com/page2‘,
// ...
];
// Sequentially scrape each page
for (const url of urls) {
await scrapePage(url);
}
// Or scrape multiple pages concurrently
await Promise.all(urls.map(scrapePage));Мы можем последовательно просмотреть и очистить каждую страницу или использовать Promise.all() для парсинга нескольких страниц одновременно.
Это позволяет нам программно парсить целые сайты!
Отказ от головы для большего масштаба
В приведенных выше примерах логика очистки данных выполняется прямо в браузере. Для большего масштабирования и контроля времени выполнения мы можем запустить наш парсер JavaScript в среде безголового браузера, используя такой инструмент, как кукольник.
Puppeteer предоставляет API Node.js для программного управления Chrome (или Chromium) через протокол DevTools. Это позволяет нам выполнять сценарии очистки на сервере, используя при этом новейший механизм рендеринга браузера.
Вот пример скрипта Puppeteer:
const puppeteer = require(‘puppeteer‘);
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(‘https://example.com‘);
// Extract data from page with page.$eval()
await browser.close();
})();Таким образом, благодаря Puppeteer, управляющему средой браузера, мы можем масштабировать наши клиентские парсеры и запускать их на серверах в облаке.
Также есть такие услуги, как апифай и Драматург Облако которые предоставляют размещенные среды, оптимизированные для выполнения крупномасштабных заданий по очистке данных.
Общие ошибки
Вот некоторые распространенные проблемы, на которые следует обратить внимание при парсинге страниц с помощью Vanilla JS:
Политика одинакового происхождения – Невозможно получить доступ к данным ответов для страниц в разных доменах. Прокси или сервисы, такие как Apify, могут помочь.
Асинхронное выполнение – Выполнение JavaScript является асинхронным, поэтому вам необходимо правильно упорядочить шаги очистки.
Динамическое содержимое страницы – Контент, загруженный через JavaScript, может отсутствовать при начальной загрузке страницы. Возможно, придется дождаться таких событий, как
DOMContentLoaded.Разница между браузерами – Скрипты могут выполняться по-разному в разных браузерах. Рекомендуется протестировать несколько браузеров.
Обнаружение скребков – Веб-сайты могут пытаться обнаружить и заблокировать скраперы с помощью таких методов, как отпечаток пальца браузера. Ротация прокси/пользовательских агентов может помочь.
Стандарты исключения роботов – Парсеры должны соблюдать такие стандарты, как robots.txt. Расширения браузера, такие как RobotJS, могут помочь.
Так что это некоторые вещи, о которых следует знать. Однако в целом Vanilla JavaScript предоставляет очень полезный и доступный способ начать парсинг Интернета!
Очистка этики
Важно отметить, что хотя парсинг веб-страниц сам по себе в целом является законным, действия, которые вы делаете с очищенными данными, могут быть запрещены.
Обязательно выполняйте очистку этично и ответственно. Избегайте чрезмерной нагрузки на веб-сайты, соблюдайте robots.txt и любые ограничения пользовательского интерфейса, а также не нарушайте условия обслуживания веб-сайтов.
Собирайте только общедоступные данные и никогда не делитесь личными данными со скопированных веб-сайтов. Используйте собранные данные только в личных или исследовательских целях, а не в коммерческих целях.
Соблюдение этих этических принципов помогает обеспечить долговечность веб-скрапинга как полезного метода.
Заключение
Вот некоторые ключевые моменты, которые мы рассмотрели при очистке веб-страниц с помощью клиентского JavaScript:
Веб-скрапинг включает в себя программное извлечение данных с веб-сайтов.
Ванильный JavaScript предоставляет доступный способ начать парсинг с использованием стандартных API браузера.
API-интерфейс Fetch может получать HTML-код страницы, а API-интерфейс DOM анализирует и извлекает данные.
Хранение, преобразование и итерация позволяют очищать веб-сайты в любом масштабе.
Безголовые браузеры, такие как Puppeteer, предоставляют больше возможностей и контроля.
Соблюдение этических принципов важно при парсинге веб-страниц.
Таким образом, использование ваших существующих навыков Vanilla JS — это быстрый способ начать извлекать полезные данные с веб-страниц. Когда вы поймете фундаментальные методы, нет предела!
Приятного (этичного) соскабливания!
