Привет всем! Вы когда-нибудь пытались создать приложение, но не можете найти данные для заполнения контента? К счастью, есть сайт с этими данными. Теперь у нас есть сайт с нашими данными, и мы можем использовать волшебный метод: парсинг.

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

Идея парсинга заключается в загрузке и извлечении данных из третьего источника, например, веб-страницы... Затем мы можем преобразовать, адаптировать и использовать данные где-то еще.

Как получить эти данные с веб-страницы?

Существует несколько способов осуществления парсинга веб-страниц... Мы будем использовать следующие инструменты:

NodeJS
Cheerio (пакет парсера)
Axios (для получения нашей страницы)

Инициализация проекта

Для начала нашего проекта мы создадим новую папку и запустим:

yarn init

Затем установим необходимые пакеты:

yarn add cheerio axios

Давайте напишем наш парсер

В этой статье мы будем парсить страницу о CAC40.

Historique CAC 40 PX1 FR0003500008 Euronext Paris - Boursorama

Данные о истории CAC 40 PX1 FR0003500008 Euronext Paris на Boursorama

www.boursorama.com

На этой странице у нас есть история акций CAC40. Нам нужно найти элементы HTML, которые мы хотим спарсить. Мы будем использовать инструмент "Инспектор" в Google Chrome.

Импортируем наши пакеты

Вы можете создать файл .js и начать писать код!

const cheerio = require('cheerio');
const axios = require('axios');

Получаем данные страницы

Теперь нам нужно получить страницу. Задачу выполнит Axios:

const siteUrl = 'https://www.boursorama.com/bourse/indices/cours/historique/1rPCAC';

const fetchData = async () => {
   const result = await axios.get(siteUrl);
   return cheerio.load(result.data);
};

Напишем функцию парсинга

Axios предоставил нам веб-сайт, а Cheerio поможет извлечь данные из него. Сначала мы получаем столбцы, чтобы получить имена ключей для наших будущих объектов, а затем строки, чтобы заполнить объекты.

С помощью Cheerio можно выполнить множество различных действий. Вот документация:

cheerio

Крошечная, быстрая и элегантная реализация основных функций jQuery, специально разработанная для сервера

www.npmjs.com

// Метод парсинга
const парсить = async () => {
   const $ = await получитьДанные();

   // Получить названия столбцов
   const ключи = [];
   await $('*[data-period-history-view] .c-table > thead > tr').each((index, element) => {
      $('th', element).each((idx, el) => {
         ключи.push($(el).text().replace(/\s/g, ''));
      });
   });

   // Получить каждую строку таблицы
   const данные = [];
   await $('*[data-period-history-view] .c-table > tbody > tr').each((index, element) => {
      const объект = {};

      $('td', element).each((idx, el) => {
         объект[ключи[idx]] = $(el).text().replace(/\s/g, '');
      });

      данные.push(объект);
   });

   return данные;
};

Запустите код

node app.js

На этом скриншоте показан результат парсинга. Вы можете сохранить его в JSON-файле, в базе данных и т.д.

Заключение

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

Вот код:

GitLab Repo: dmg.link/blog-scraping-repo.

Вы можете найти мои другие статьи и следить за мной здесь. Спасибо за чтение, надеюсь, вы узнали что-то новое сегодня 🚀

Автоматизируйте ваше приложение React Native с помощью Fastlane

Упростите создание скриншотов, развертывание бета-версии, размещение в App Store и подписывание вашего приложения React Native 🚀

levelup.gitconnected.com

Как использовать Face ID с React Native или Expo

Внедрите биометрическую аутентификацию в ваше приложение React Native или Expo. Позвольте вашим пользователям входить с ее помощью.

medium.com

Как парсить с помощью Node.js