Веб-збирання — одна з найцікавіших речей у світі програмування.
Що таке веб-збирання?
Чому воно взагалі існує?
Давайте дізнаємося відповіді.
Що таке веб-скрапінг?
Веб-збирання – це автоматизоване завдання для вилучення даних із веб-сайтів.
Існує багато застосувань веб-збирання. Отримання цін на продукти та їх порівняння з різними платформами електронної комерції. Отримання щоденної ціни з Інтернету. Створення власної пошукової системи, як-от Google, Yahoo тощо. Список можна продовжувати.
Ви можете зробити більше, ніж ви думаєте, за допомогою веб-збирання. Коли ви дізнаєтеся, як витягувати дані з веб-сайтів, ви зможете робити з ними все, що завгодно.
Програма, яка витягує дані з веб-сайтів, називається веб-скребком. Ви збираєтеся навчитися писати веб-скребки на JavaScript.
Збирання веб-сторінок складається з двох частин.
- Отримання даних за допомогою бібліотек запитів і безголового браузера.
- Синтаксичний аналіз даних, щоб отримати з даних точну інформацію, яку ми хочемо.
Без зайвих слів, давайте почнемо.
Налаштування проекту
Я припускаю, що у вас встановлено Node, якщо ні, перегляньте посібник із встановлення NodeJS.
Ми збираємося використовувати пакети node-fetch і cheerio для веб-перегляду в JavaScript. Давайте налаштуємо проект за допомогою npm для роботи зі стороннім пакетом.
Давайте швидко розглянемо кроки для завершення налаштування.
- Створіть каталог під назвою web_scraping і перейдіть до нього.
- Виконайте команду npm init, щоб ініціалізувати проект.
- Дайте відповіді на всі запитання відповідно до ваших уподобань.
- Тепер встановіть пакунки за допомогою команди
npm install node-fetch cheerio
Давайте подивимося на проблиски встановлених пакетів.
вибірка вузла
Пакет node-fetch переносить window.fetch у середовище node js. Це допомагає робити HTTP-запити та отримувати необроблені дані.
cheerio
Пакунок cheerio використовується для аналізу та вилучення необхідної інформації з необроблених даних.
Двох пакетів node-fetch і cheerio достатньо для веб-скрапінгу в JavaScript. Ми не збираємося бачити кожен метод, який надають пакети. Ми побачимо потік веб-збирання та найкорисніші методи в цьому потоці.
Роблячи це, ви навчитеся веб-скрейпінгу. Отже, приступаємо до роботи.
Вичищення списку Кубка світу з крикету
Тут, у цьому розділі, ми збираємося зробити фактичне веб-збирання.
Що ми видобуваємо?
За назвою розділу, думаю, ви легко здогадаєтесь. Так, все, що ви думаєте, правильно. Давайте витягнемо всіх переможців і віце-чемпіонів світу з крикету.
- Створіть у проекті файл з назвою extract_cricket_world_cups_list.js.
- Ми будемо використовувати Кубок світу з крикету Вікіпедії сторінку, щоб отримати потрібну інформацію.
- Спочатку отримайте вихідні дані за допомогою пакета node-fetch.
- Наведений нижче код отримує необроблені дані вищезгаданої сторінки Вікіпедії.
const fetch = require("node-fetch");
// function to get the raw data
const getRawData = (URL) => {
return fetch(URL)
.then((response) => response.text())
.then((data) => {
return data;
});
};
// URL for data
const URL = "https://en.wikipedia.org/wiki/Cricket_World_Cup";
// start of the program
const getCricketWorldCupsList = async () => {
const cricketWorldCupRawData = await getRawData(URL);
console.log(cricketWorldCupRawData);
};
// invoking the main function
getCricketWorldCupsList();
Ми отримали необроблені дані з URL-адреси. Тепер настав час витягти потрібну нам інформацію з необроблених даних. Скористаємося пакетом cheerio, щоб отримати дані.
Отримання даних, які включають HTML-теги за допомогою cheerio, — легка прогулянка. Перш ніж приступити до фактичних даних, давайте подивимося приклад аналізу даних за допомогою cheerio.
- Проаналізуйте дані HTML за допомогою методу cheerio.load.
const parsedSampleData = cheerio.load(
`<div id="container"><p id="title">I'm title</p></div>`
);
- Ми проаналізували наведений вище HTML-код. Як витягти з нього вміст тегу p? Це те саме, що й селектори в маніпуляціях з DOM JavaScript.
console.log(parsedSampleData(“#title”).text());
Ви можете вибрати теги, як хочете. Ви можете перевірити різні методи з офіційний сайт cheerio.
- Тепер настав час витягти список чемпіонату світу. Щоб отримати інформацію, нам потрібно знати теги HTML, які містять інформацію на сторінці. Перейти до сторінка чемпіонату світу з крикету у Вікіпедії і перевірте сторінку, щоб отримати інформацію про теги HTML.
Ось повний код.
const fetch = require("node-fetch");
const cheerio = require("cheerio");
// function to get the raw data
const getRawData = (URL) => {
return fetch(URL)
.then((response) => response.text())
.then((data) => {
return data;
});
};
// URL for data
const URL = "https://en.wikipedia.org/wiki/Cricket_World_Cup";
// start of the program
const getCricketWorldCupsList = async () => {
const cricketWorldCupRawData = await getRawData(URL);
// parsing the data
const parsedCricketWorldCupData = cheerio.load(cricketWorldCupRawData);
// extracting the table data
const worldCupsDataTable = parsedCricketWorldCupData("table.wikitable")[0]
.children[1].children;
console.log("Year --- Winner --- Runner");
worldCupsDataTable.forEach((row) => {
// extracting `td` tags
if (row.name === "tr") {
let year = null,
winner = null,
runner = null;
const columns = row.children.filter((column) => column.name === "td");
// extracting year
const yearColumn = columns[0];
if (yearColumn) {
year = yearColumn.children[0];
if (year) {
year = year.children[0].data;
}
}
// extracting winner
const winnerColumn = columns[3];
if (winnerColumn) {
winner = winnerColumn.children[1];
if (winner) {
winner = winner.children[0].data;
}
}
// extracting runner
const runnerColumn = columns[5];
if (runnerColumn) {
runner = runnerColumn.children[1];
if (runner) {
runner = runner.children[0].data;
}
}
if (year && winner && runner) {
console.log(`${year} --- ${winner} --- ${runner}`);
}
}
});
};
// invoking the main function
getCricketWorldCupsList();
І ось зібрані дані.
Year --- Winner --- Runner 1975 --- West Indies --- Australia 1979 --- West Indies --- England 1983 --- India --- West Indies 1987 --- Australia --- England 1992 --- Pakistan --- England 1996 --- Sri Lanka --- Australia 1999 --- Australia --- Pakistan 2003 --- Australia --- India 2007 --- Australia --- Sri Lanka 2011 --- India --- Sri Lanka 2015 --- Australia --- New Zealand 2019 --- England --- New Zealand
Круто 😎, правда?
Шаблон скребка
Отримання необроблених даних із URL-адреси є звичайним у кожному проекті веб-збирання. Єдина частина, яка змінюється, це вилучення даних відповідно до вимог. Ви можете спробувати наведений нижче код як шаблон.
const fetch = require("node-fetch");
const cheerio = require("cheerio");
const fs = require("fs");
// function to get the raw data
const getRawData = (URL) => {
return fetch(URL)
.then((response) => response.text())
.then((data) => {
return data;
});
};
// URL for data
const URL = "https://example.com/";
// start of the program
const scrapeData = async () => {
const rawData = await getRawData(URL);
// parsing the data
const parsedData = cheerio.load(rawData);
console.log(parsedData);
// write code to extract the data
// here
// ...
// ...
};
// invoking the main function
scrapeData();
Висновок
Ви навчилися очищати веб-сторінку. Тепер ваша черга попрактикуватися в кодуванні.
Я б також запропонував ознайомитися з популярними фреймворками веб-збирання та хмарними рішеннями для веб-збирання.
Щасливого кодування 🙂
Вам сподобалось читати статтю? Як щодо того, щоб поділитися зі світом?