Як виконувати веб-скрейпінг за допомогою Javascript: вичерпний посібник

Хочете навчитися робити веб-скрейпінг за допомогою Javascript, але не знаєте, з чого почати? Не хвилюйтеся.

У цьому блозі ми надамо вам всю необхідну інформацію, щоб розпочати скрейпінг за допомогою Javascript. Крім того, ми проведемо вас через покроковий процес парсингу веб-сайту за допомогою JavaScript за допомогою Puppeteer.

Почнемо.

Що таке парсинг Javascript?

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

По суті, парсинг JavaScript – це процес використання бібліотек або інструментів на основі JavaScript для вилучення цінних даних з веб-сайтів. Хоча ви можете використовувати інші мови програмування, такі як Python для парсингу веб-сайту, парсинг Javascript особливо корисний для збору інформації з веб-сайтів, які використовують JavaScript для відображення контенту.

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

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

Тепер, коли ми розуміємо, що таке веб-скрейпінг за допомогою Javascript, давайте дізнаємося, якими способами можна використовувати Javascript для парсингу сайту.

3 поширені способи парсингу веб-сайту за допомогою Javascript

Існує кілька способів використання Javascript для парсингу веб-сайту. Але який з них вам слід використовувати? Що ж, відповідь на це питання залежить від ваших вимог до парсингу. У цьому розділі ми пояснимо три поширені способи, які люди використовують для парсингу веб-сайту за допомогою Javascript.

Cheerio для простих статичних вебсайтів

Ви бачили вебсайти HTML, вміст яких швидко завантажується під час початкового запиту? Ну, це тому, що вони не містять важкого контенту, такого як відео чи складна анімація. Працюючи з такими статичними вебсайтами, використовуючи Cheerio – ідеальний вибір.

Отримуючи необроблений HTML-код сторінки через HTTP-клієнт, Cheerio дозволяє легко переміщатися по DOM та маніпулювати ним.

Він легкий та швидкий, головним чином тому, що йому не потрібно завантажувати все середовище браузера. Як ми вже згадували, цей метод ідеально підходить для простих статичних веб-сайтів, де дані легко доступні в HTML-коді.

Puppeteer для парсингу динамічного контенту

Якщо ви маєте справу зі складнішим веб-сайтом, таким, що містить динамічний контент, такий як відео та зображення, або сайтами з великим навантаженням на JavaScript, де контент завантажується динамічно, Puppeteer, бібліотека Node, є найкращим вибором.

Puppeteer використовує веб-браузер без графічного інтерфейсу користувача (GUI) для взаємодії з веб-сторінками. Це означає, що він може імітувати дії користувача, такі як натискання кнопок або прокручування, що є важливим для доступу до контенту, який з'являється в результаті цих взаємодій.

Puppeteer – це потужний інструмент для парсингу сучасних веб-застосунків, що залежать від AJAX та потребують повноцінного середовища браузера для виконання коду JavaScript та відображення контенту.

Вилучення даних з веб-сайту за допомогою jQuery

Іноді вам може не знадобитися вилучати великі обсяги даних. Вам може знадобитися швидко вилучити інформацію, наприклад, вилучити певні адреси електронної пошти. У таких випадкахjQuery може бути зручним інструментом. Хоча це клієнтський скрипт, який працює у браузері, ви можете використовувати jQuery для легкого вибору та вилучення даних з веб-сторінок.

Цей метод особливо корисний для завдань спеціального скрейпінгу. Це так само просто, як відкрити консоль, написати кілька рядків коду jQuery та витягти потрібну інформацію. Однак цей підхід не підходить для масштабних або автоматизованих завдань парсингу.

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

Однак, що стосується цього посібника, ми будемо виконувати веб-парсинг на Javascript за допомогою Puppeteer. Давайте покроково розповімо вам про те, як виконувати веб-скрапінг за допомогою Javascript у Puppeteer.

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

Веб-скрейпінг іноді може здаватися складним, але це завдання стає в 10 разів легшим, якщо ви знаєте правильні інструменти. У цьому розділі ми розглянемо, як використовувати Puppeteer, бібліотеку Node, для веб-скрейпінгу. Puppeteer – це ідеальний інструмент Javascript для скрейпінгу динамічного контенту.

Давайте розберемо процес на три простих кроки, які покажуть вам, як витягти зображення з пошуку Google за запитом "happy dog". Давайте почнемо!

Крок 1: Створення нового каталогу та встановлення Puppeteer

Перш за все, давайте налаштуємо середовище нашого проекту. Спочатку створіть новий каталог проекту та ініціалізуйте його.

Потім встановіть Puppeteer, який ми будемо використовувати для парсингу. Відкрийте консоль та виконайте такі команди:

• Для створення нового каталогу:mkdir web-scraping-puppeteer

• Для переміщення в каталог: cd web-scraping-puppeteer

• Ініціалізація нового проекту Node.js: npm init -y

• Встановлення Puppeteer: npm install puppeteer
  
  
  

Крок 2: Написання початкового коду

Тепер давайте напишемо початковий код для запуску браузера, переходу до Google Images та пошуку "happy dog". Ми будемо використовувати Puppeteer, щоб відкрити нове вікно браузера, встановити область перегляду та взаємодіяти з елементами сторінки.

Ось код для цього кроку:

Пояснення коду:

• const puppeteer = require('puppeteer');

  • Пам'ятаєте, на першому кроці ми встановили Puppeteer у нашу систему? Ну, цей рядок імпортує бібліотеку Puppeteer у скрипт. Потім це дозволяє нам використовувати її функціональність для керування браузером без графічного інтерфейсу.

• (async()=> {...})();

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

• const browser = await puppeteer.launch();

  • Цей рядок повідомляє Puppeteer про необхідність розпочати новий сеанс браузера. Ключове слово await використовується для забезпечення повного запуску браузера перед продовженням виконання скрипта.

• const page = await browser.newPage();

  • Після запуску браузера ця команда відкриває нову сторінку (або вкладку) у браузері.

• awaitpage.goto('https://www.google.com/imghp?hl=en');

  • Скрипт переміщує відкриту сторінку до вказаної URL-адреси, яка в цьому випадку є сторінкою пошуку зображень Google. Ключове слово await гарантує завершення навігації перед продовженням.

• await page.setViewport({ширина: 1080, висота: 1024 });

  • Це встановлює розміри вікна (видимої частини сторінки). Це важливо для знімків або сторінок, макет яких змінюється залежно від розміру екрану.

• await page.type('textarea[name="q"]','щасливий собака');

  • Ця команда імітує введення тексту «щасливий собака» в поле введення на сторінці, зокрема тексту з атрибутом name «q» (який у Google Images є полем пошуку).

• await page.click('button[type="submit"]');

  • Цей рядок імітує клік на кнопці "Надіслати" форми, що запускає пошук.

• await page.waitForNavigation();

  • Після натискання кнопки «Надіслати» ця команда очікує завершення навігації сторінкою (тобто очікує завантаження результатів пошуку).

• await browser.close();

  • Після виконання всіх попередніх кроків ця команда закриває браузер.
    
    

Крок 3: Отримання зображення "щасливого собаки" з Google Images.

Тепер наша мета — вибрати зображення, яке ми хочемо скопіювати, та визначити його клас, ідентифікатор та URL-адресу джерела всередині його div.

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

Опція «Перевірити» покаже вам контейнер div зображення, яке матиме свій клас, ідентифікатор та URL-адресу джерела, яку потрібно скопіювати, щоб включити до нашого коду.

Ось як виглядатиме повний код:

У цьому коді:

• Спочатку ми гарантуємо, що Puppeteer переходить до Google Images та виконує пошук за запитом "щасливий собака".

• Після завантаження результатів ми вибираємо всі зображення, що відповідають класу '.sFlh5c.pT0Scc.iPVvYb'.

• Потім ми натискаємо на потрібне зображення у списку, щоб запустити попередній перегляд.

• Ми чекаємо, поки завантажиться контейнер попереднього перегляду (#islsp) та велике зображення всередині нього.

• Нарешті, ми витягуємо атрибут src великого зображення, який містить його URL-адресу.
  
  

Якщо вам цікаво, ми використали оператори «if» та «else» в цьому коді, щоб гарантувати, що він поверне «Не знайдено зображень із зазначеним класом» у випадку неправильного класу. В іншому випадку, іноді, код переривається.

Ви успішно навчилися парсити веб-сайт за допомогою Javascript та Puppeteer. Ви можете використовувати той самий підхід для парсити кілька зображень з будь-якого веб-сайту.

Однак, деякі вебсайти не дозволяють вам скрапінгувати їхній контент. Вони мають методи запобігання скрапінгу, які ускладнюють вам виконання роботи. Або, що ще гірше, вас можуть взагалі заблокувати.

Але є рішення цієї проблеми. Перейдіть до наступного розділу, щоб дізнатися більше про як ви можете скрейпувати веб-сайти без виявлення або блокування.

Використовуйте AdsPower для прихованого перегляду

Якщо ви хочете додати шар захисту під час парсингу даних за допомогою JavaScript, AdsPower – це найкращий браузер із захистом від виявлення, який ви можете використовувати.AdsPowerбраузер забезпечує безперебійний досвід веб-скрейпінгу, ефективно уникаючи перешкод для скрейпінгу.

Ви також можете використовувати його для створення кількох профілів користувачів та залишатися анонімним в Інтернеті.Зареєструйтесь сьогодні, щоб забезпечити собі завтрашній день.

Підсумок!

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

Використовуйте техніку, згадану в цьому блозі, та зберіть потрібну вам інформацію. Також не забудьте використовувати AdsPower для безпечного парсингу.