Начало работы с веб-парсингом в JavaScript

Опубликовано: 2021-04-02

Веб-скрапинг - одна из самых интересных вещей в мире программирования.

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

Почему он вообще существует?

Давайте узнаем ответы.

Что такое веб-парсинг?

Веб-скрапинг - это автоматизированная задача по извлечению данных с веб-сайтов.

Есть много приложений для очистки веб-страниц. Извлечение цен на товары и их сравнение с различными платформами электронной коммерции. Получение ежедневной цитаты из Интернета. Создание собственной поисковой системы, такой как Google, Yahoo и т. Д. Список можно продолжить.

Вы можете сделать больше, чем думаете, с помощью веб-скрейпинга. Как только вы узнаете, как извлекать данные с веб-сайтов, вы можете делать с ними все, что захотите.

Программа, которая извлекает данные с веб-сайтов, называется парсер . Вы научитесь писать парсеры на JavaScript.

В основном парсинг веб-страниц состоит из двух частей.

  • Получение данных с помощью библиотек запросов и безголового браузера.
  • Анализ данных для извлечения из них точной информации.

Без лишних слов приступим.

Настройка проекта

Я предполагаю, что у вас установлен Node, если нет, ознакомьтесь с руководством по установке NodeJS.

Мы собираемся использовать пакеты node-fetch и cheerio для cheerio веб-страниц в JavaScript. Настроим проект с npm для работы со сторонним пакетом.

Давайте быстро посмотрим, как завершить настройку.

  • Создайте каталог с именем web_scraping и перейдите к нему.
  • Запустите команду npm init чтобы инициализировать проект.
  • Ответьте на все вопросы, исходя из ваших предпочтений.
  • Теперь установите пакеты с помощью команды
 npm install node-fetch cheerio

Давайте взглянем на установленные пакеты.

выборка узла

Пакет node-fetch переносит window.fetch в среду node js. Это помогает делать HTTP-запросы и получать необработанные данные.

радость

Пакет cheerio используется для анализа и извлечения необходимой информации из необработанных данных.

Два пакета node-fetch и cheerio достаточно хороши для парсинга веб-страниц в JavaScript. Мы не собираемся видеть все методы, предоставляемые пакетами. Мы увидим поток веб-скрапинга и наиболее полезные методы в этом потоке.

Вы научитесь чистке веб-страниц, выполняя это. Итак, приступим к работе.

Список чемпионата мира по крикету

Здесь, в этом разделе, мы собираемся провести фактический парсинг веб-страниц.

Что мы добываем?

По названию раздела, думаю, вы легко догадались. Да, все, что вы думаете, правильно. Давайте извлечем всех победителей и призеров чемпионата мира по крикету до сих пор.

  • Создайте в проекте файл с именем extract_cricket_world_cups_list.js .
  • Мы будем использовать страницу Wikipedia Cricket World Cup, чтобы получить желаемую информацию.
  • Сначала получите необработанные данные с помощью пакета 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 .

  • cheerio.load данные HTML с cheerio.load метода 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, которые содержат информацию на странице. Перейдите на страницу Wikipedia чемпионата мира по крикету и просмотрите страницу, чтобы получить информацию о тегах 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();

Вывод

Вы узнали, как очистить веб-страницу. Теперь ваша очередь попрактиковаться в кодировании.

Я бы также посоветовал ознакомиться с популярными фреймворками для парсинга и облачными решениями для парсинга.

Счастливое кодирование

ТЕГИ:
  • JavaScript