Вебскрапінг з jQuery: Повний посібник

Тут я покажу вам, як створити свій вебскрапер за допомогою jQuery. Незалежно від того, чи займаєтеся ви вебскрапінгом на боці клієнта, чи на боці сервера, я проведу вас через кроки та ключові концепції. Наприкінці ви матимете навички, щоб уже незабаром почати витягувати дані з вебсайтів! Давайте почнемо!

Що таке jQuery?

jQuery є однією з найпопулярніших JavaScript-бібліотек, які використовують для роботи з DOM (Document Object Model). Вона спрощує завдання на кшталт обходу та модифікації DOM, обробки подій і виконання AJAX-запитів. jQuery використовують для додавання інтерактивності сайтам, і вона надзвичайно корисна для вебскрапінгу, оскільки дає змогу легко вибирати HTML-елементи та витягувати з них вміст.

You can use jQuery for both client-side and server-side web scraping. In client-side scraping, your web browser executes the scraping code, while in server-side scraping, the scraping process is handled on the server, typically using Node.js. We’ll explore both approaches in this tutorial.

Що таке скрапінг на боці клієнта?

Клієнтський скрапінг означає виконання коду для збирання даних безпосередньо в браузері користувача. Цей підхід реалізується за допомогою JavaScript, що дає браузеру змогу отримати доступ до HTML-вмісту вебсторінки та витягнути потрібні дані. Втім, клієнтський скрапінг має певні обмеження, головно через механізми безпеки, як-от CORS (Cross-Origin Resource Sharing).

Наприклад, якщо ви спробуєте отримати дані з іншого домену (сайту, який не збігається з тим, що ви зараз переглядаєте), браузер заблокує запит через політики CORS. Ці обмеження ускладнюють клієнтський скрапінг для завдань великомасштабного вебскрапінгу, але це все ще корисно для невеликих проєктів або коли можна скрапити той самий домен.

Як скрапити вебсторінку за допомогою jQuery?

Перше, що вам потрібно зробити, — завантажити HTML-вміст вебсторінки, яку ви хочете скрапити. Це робиться за допомогою HTTP-запиту. jQuery пропонує простий спосіб виконувати такі запити через функцію $.get().

Ось приклад того, як скрапити вебсторінку:

$.get("https://example.com", function(html) {
console.log(html);
});

Цей код надсилає HTTP GET-запит до вказаної URL-адреси та виводить HTML-вміст вебсторінки в консоль. Однак якщо ви спробуєте зробити це на сайті, який не дозволяє крос-оригінні запити, ви зіткнетеся з проблемою, відомою як помилка CORS.

Чому ми не можемо скрапити сайти на клієнтському боці?

Проблема CORS виникає тому, що сучасні браузери реалізують обмеження безпеки, щоб не дати шкідливим сайтам красти дані з інших сайтів. Коли ваш браузер надсилає запит до іншого вебсайту, він додає заголовок “Origin”, який визначає, звідки походить запит. Сервер, що отримує запит, перевіряє цей заголовок, щоб з’ясувати, чи походить запит із дозволеного домену. Якщо ні, сервер заблокує запит.

Ця функція безпеки ускладнює скрапінг на боці клієнта. Щоб обійти це, ви можете використати проксі-сервер або безголовий браузер, але ці рішення зазвичай належать до скрапінгу на боці сервера.

Обхід обмежень CORS за допомогою Web Unlocker від Bright Data

Оскільки клієнтський скрапінг обмежений політиками CORS, кращий підхід — використовувати серверне проксі-рішення на кшталт Web Unlocker від Bright Data.

Чому варто використовувати Web Unlocker?

✅ Обхід обмежень CORS — отримуйте дані з будь-якого сайту без блокувань безпеки браузера.
✅ Обробляє антибот-захист — автоматично керує заголовками, cookies і CAPTCHA.
✅ Немає потреби в ручній ротації проксі — динамічно призначає IP-адреси та ротує їх за потреби.
✅ Works Seamlessly with jQuery & Node.js — Fetch data server-side before processing it with jQuery.

How to Use Web Unlocker with jQuery in Node.js

Щоб інтегрувати Web Unlocker у свій скрапер на боці сервера, виконайте такі кроки:

1️⃣ Зареєструйтеся в Bright Data та отримайте облікові дані Web Unlocker.
2️⃣ Install Axios (a popular HTTP client for Node.js):

npm install axios

3️⃣ Змініть свій вебскрапер, щоб використовувати Web Unlocker:

const axios = require("axios");

const webUnlockerProxy = "http://username:[email protected]:22225";

async function scrapeWithWebUnlocker(url) {
    try {
        const response = await axios.get(url, {
            проксі: {
                host: "brd.superproxy.io",
                port: 22225,
                auth: {
                    username: "your-username",
                    password: "your-password"
                }
            }
        });

        console.log(response.data); // Process the HTML with jQuery
    } catch (error) {
        console.error("Помилка під час отримання даних:", error);
    }
}

scrapeWithWebUnlocker("https://example.com");

How This Works:

• Запит маршрутизується через Web Unlocker від Bright Data, оминаючи CORS і захист від ботів.
• The response contains the HTML of the target page , which can then be processed with jQuery in Node.js.
• Цей метод забезпечує надійний і масштабований вебскрапінг без турбот про блокування IP-адрес або CAPTCHA.

Server-Side Scraping With jQuery and Node.js

Since client-side scraping is limited by CORS, a more robust approach is to use server-side scraping. This method involves running your scraper on a server that doesn’t have the same restrictions as browsers. Node.js, a JavaScript runtime environment, is perfect for server-side scraping. You can use jQuery with Node.js to scrape web pages without worrying about CORS errors.

How to Use jQuery With Node.js?

To use jQuery in Node.js, you need to install both the jQuery library and a tool called jsdom. jsdom is a JavaScript implementation of the web standards (like the DOM) that runs in Node.js. It essentially simulates a web browser inside your server, allowing jQuery to work as if it were in a real browser environment.

First, you need to set up your Node.js environment. Make sure you have Node.js installed on your system. Then, create a new directory for your project and install the required dependencies.

mkdir my-web-scraper
cd my-web-scraper
npm init -y
npm install jquery jsdom

Once the packages are installed, you can start using jQuery in your Node.js scraper.

Example: Scraping a Web Page With Node.js and jQuery

Here’s a basic example of how to scrape a webpage using jQuery in Node.js:

const { JSDOM } = require("jsdom");
const { window } = new JSDOM("", { url: "https://example.com" });
const $ = require("jquery")(window);
$.get("https://example.com", function(html) {
console.log(html);
});

Цей код ініціалізує екземпляр jsdom із URL сторінки, яку ви хочете обробити за допомогою вебскрапінгу. Після цього jQuery може взаємодіяти з HTML-документом так само, як у браузері.

Scraping Specific Data

Коли ви маєте HTML-вміст сторінки, наступний крок — витягнути потрібні дані. Саме тут jQuery проявляє себе найкраще. Ви можете використати метод jQuery .find(), щоб вибрати потрібні елементи, а .text() або .attr() — щоб витягнути їхній вміст.

Let’s say you want to scrape product names, prices, and URLs from an e-commerce site. Ось як це можна зробити:

$.get("https://example.com/products", function(html) {
const productElements = $(html).find("li.product");
const products = [];
productElements.each((i, productElement) => {
const product = {
name: $(productElement).find("h2").text(),
price: $(productElement).find(".price").text(),
url: $(productElement).find("a").attr("href")
};
products.push(product);
});
console.log(products);
});

У цьому прикладі:

• Ми використовуємо $.get(), щоб отримати HTML-розмітку сторінки товару.
• Метод .find() шукає всі елементи li з класом product.
• Ми проходимося по кожному елементу продукту та витягуємо назву товару, ціну й URL за допомогою методів jQuery .text() і .attr().

Це виведе масив об’єктів товарів, що містить зібрані дані.

Storing Scraped Data

Після того як ви витягнули потрібні дані, наступний крок - зберегти їх. Ви можете зберегти дані у локальному файлі, базі даних або будь-якому іншому сховищі. Для простоти збережімо дані у JSON-файлі.

To do this, you can use Node.js’s built-in fs (file system) module to write the data to a file.

const fs = require("fs");
fs.writeFileSync("products.json", JSON.stringify(products, null, 2));

This code will save the scraped product data to a file called products.json in the current directory.

Advanced Scraping Techniques

Pagination

Багато сайтів мають пагінований вміст, тобто не всі дані відображаються на одній сторінці. Щоб зібрати всі дані з сайту з пагінацією, потрібно переходити між кількома сторінками.

У такому разі ви можете змінити свій скрапер так, щоб він переходив за посиланням «Next» або формував URL-адреси для кожної сторінки. Ось приклад того, як можна виконувати вебскрапінг кількох сторінок:

function scrapePage(pageUrl) {
$.get(pageUrl, function(html) {
const productElements = $(html).find("li.product");
const products = [];
productElements.each((i, productElement) => {
const product = {
name: $(productElement).find("h2").text(),
price: $(productElement).find(".price").text(),
url: $(productElement).find("a").attr("href")
};
products.push(product);
});
console.log(products);
const nextPage = $(html).find(".next-page").attr("href");
if (nextPage) {
scrapePage(nextPage); // Recursively scrape the next page
}
});
}
scrapePage("https://example.com/products?page=1");

Ця рекурсивна функція спершу збере дані з поточної сторінки, а потім перевірить наявність посилання на наступну сторінку. Якщо буде знайдено посилання «Next», вона знову викличе scrapePage() з URL наступної сторінки.

Using Regular Expressions

Іноді вам може знадобитися витягнути з вебсторінки певні шаблони даних. Наприклад, якщо ціни на товари подано у сталому форматі, ви можете використовувати регулярні вирази (regex), щоб зіставити й витягнути ціни.

Ось приклад того, як використовувати regex із jQuery:

$.get("https://example.com/products", function(html) {
const prices = new Set();
$(html).find("span.price").each((i, priceElement) => {
const priceText = $(priceElement).text();
if (/^$d .d{2}$/.test(priceText)) {
prices.add(priceText);
}
});
console.log(Array.from(prices));
});

This code uses a regular expression (/^$d .d{2}$/) to match strings that represent prices, like “$69.00”. It stores the matched prices in a Set to ensure uniqueness.

Conclusion

In this tutorial, I showed you how to scrape data from websites using jQuery. We looked at both client-side and server-side scraping methods. While client-side scraping has its limits because of security measures like CORS, server-side scraping with jQuery in Node.js lets you avoid these restrictions and scrape data from any site. I also explained how to use jQuery’s DOM traversal methods to extract specific information.

Ми розглянули, як обробляти пагінацію, використовувати регулярні вирази та зберігати дані. Тепер у вас є інструменти, щоб створювати ефективні вебскрапери та збирати корисні дані з вебу. Сподіваюся, ви почуваєтеся впевнено й з натхненням, щоб почати вебскрапінг!