Парсинг веб-страниц с помощью Cheerio, Node.js и Axios (для начинающих)

Парсинг веб-страниц - это процесс использования ботов для извлечения контента и данных с веб-сайта. Когда пользователь запрашивает доступ к веб-сайту на сервере. Ответ сервера содержит HTML-форму. Парсинг веб-страниц в основном обрабатывает эту HTML-информацию и получает необходимые данные.

Теории достаточно. Теперь пришло время попробовать это на практике.

Мы будем использовать cheerio для этого проекта. Вам следует иметь представление о селекторе и инструментах разработчика Chrome.

Теперь давайте создадим сервер с помощью Node.js и Express.js.

Ничего нового, верно? Теперь мы переходим к следующему шагу. Но перед этим давайте проясним, какую цель мы хотим достичь с помощью парсинга веб-страниц.

Мы собираемся использовать URL фильма и получить некоторые данные об этом фильме и сохранить их в формате CSV.

Установите cheerio, axios и json2csv.

Мы собираемся использовать cheerio в нашем файле index.js. Мы получаем данные из этой ссылки

(Кстати, это шедевр фильм. Вы должны посмотреть его 😊).

const express = require('express'); const axios = require('axios'); const cheerio = require('cheerio'); const fs = require('fs') const json2csv = require('json2csv').Parser; const app = express(); const movieUrl = "https://www.imdb.com/title/tt5354160/?ref_=nv_sr_srsg_0"; (async () = > { const data = []; const response = await axios(movieUrl, { headers: { "accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9", "accept-encoding": "gzip, deflate, br", "accept-language": "en-GB,en-US;q=0.9,en;q=0.8,bn;q=0.7" } }) let htmlBody = response.data; let $ = cheerio.load(htmlBody); let movieName = $(".khmuXj>h1").text(); let rating = $(".jGRxWM").text(); let trailer = $('.ipc-lockup-overlay.sc-5ea2f380-2.gdvnDB.hero-media__slate-overlay.ipc-focusable').attr('href'); data.push({ movieName, rating, trailer }) const j2cp = new json2csv(); const csv = j2cp.parse(data); fs.writeFileSync('./movieData.csv', csv, "utf-8") })() const PORT = 5000; app.listen(PORT, () = > { console.log(`server is running ${PORT}`); })

Я объясню этот код построчно. movieUrl - это целевая ссылка.

После этого идет асинхронная анонимная функция, которая вызывает сама себя. Если у вас есть представление о IIFE в JavaScript, то вы уже знаете это.

Затем мы получаем пустой массив data. Он помогает нам преобразовать наши данные в формат CSV. Поскольку json2csv требует данных в формате JSON для преобразования в CSV.

Мы создаем запрос axios.get. Но здесь нужно обратить внимание на одну вещь. Где мы получаем атрибуты headers. Мы получаем их из вкладки "Network" браузера. Просто откройте браузер. Щелкните правой кнопкой мыши на браузере, перейдите в inspect. Затем вы найдете вкладку "Network". Теперь перейдите на нашу целевую ссылку. Вы можете увидеть много имен файлов, статусов и другой информации во вкладке "Network". Перейдите к первому.

Теперь вы найдете информацию о наших headers в request headers вкладки "Network". Теперь у вас возникает вопрос. Зачем использовать headers для get запроса. Когда вы хотите получить данные с веб-сайта, существует большая вероятность, что этот веб-сайт не приветствует вас. Потому что этот веб-сайт является владельцем этих данных. Верно? Таким образом, если этот веб-сайт понимает, что этот запрос API не является обычным, то он может заблокировать данные. В этом случае headers уведомляют сервер, что этот запрос API поступает из обычного браузера. Вы можете скопировать все request headers в свой код.

let $ = cheerio.load(htmlBody) помогает нам выполнять выборку. Затем перейдите к опции elements, чтобы проверить нужные данные и использовать их в качестве селектора. Здесь мы получаем название фильма, рейтинг и трейлер. (Посмотрите на стрелку на этой картинке. Вы можете получить имя класса, как это)

let movieName = $(".khmuXj>h1").text(); let rating = $(".jGRxWM").text(); let trailer = $('.ipc-lockup-overlay.sc-5ea2f380-2.gdvnDB.hero-media__slate-overlay.ipc-focusable').attr('href');

Затем данные добавляются в массив data в этом коде.

data.push({ movieName, rating, trailer })

и преобразовать данные в формат CSV с помощью этих кодов.

const j2cp = new json2csv(); const csv = j2cp.parse(data);

Теперь создайте файл с помощью модуля fs Node.js.

Запустите свой файл index.js и наслаждайтесь результатом.

Примечание: Этот блог предназначен только для обучения.

Github Repo: github.com/alaminsahed/web-scraping-to-csv

Наслаждайтесь кодированием!

Оригинальная публикация на https://sahedthought.hashnode.dev.