Как парсить сайты на JS?

Question

[MyQuestion]

Добрый день!

Я не очень хорошо понимаю эту тему.
Куча информации и я совсем запутался. Допустим, я хочу получить курсы валют на сегодня.
С этой страницы:
https://www.cbr.ru/scripts/XML_daily.asp
Или с этой страницы:
https://www.cbr.ru/currency_base/daily/
Что я должен сделать? В некоторых источниках я видел информацию, что такие страницы скачиваются, а потом с ними что-то делается. Неужели для того, что бы получить пару строчек информации, нужно скачать страницу веб сайта?
Каким вообще образом, я формирую запрос к странице?

Comments

[iBird Rose]

ты видимо не правильно понял слово "скачиваются". тебе нужно страницу получить в виде исходного кода и записать ее в переменную. а дальше уже просто работать с этой переменной как с обычной строкой в js. доставать нужные данные и т.д.

[Lynn «Кофеман»]

Да, как бы это странно не звучало, но что бы получить что из интернета это приходится скачивать.

И ваша первая ссылка как раз для этого и предназначена

[MyQuestion]

Я наверное уже не найду ссылку на статью, но там юзали ПО, аналогичное wget, и готовили папку scrabepage, под результат. В общем не туда залез, ясно )

[Сергей delphinpro]

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

Чтобы получать курсы валют, лучше использовать специальные апи, которые отдают чистые данные в json формате. Есть платные, есть бесплатные.

[MyQuestion]

Сергей delphinpro, где-то про это можно почитать? Мне катастрофически не хватает знаний... Если на js, на уровне основ, я ещё что-то могу, то всё что касается запросов, ajax, подключения сторонних api, мой уровень бесконечно близок к 0.
Просто задачи всплывают, раньше, чем я начал полноценно изучать javascript...

[szQocks]

MyQuestion, я оставлю это сдесь , мало ли пригодится, недавно как раз выполнял тестовое задание по валютам.
https://www.cbr-xml-daily.ru/daily_json.js

Answer 1

[Alice]

Держи

Comments

[MyQuestion]

Спасибо. Не совсем понятно, как он работает, надо разбираться, но выглядит интересно. Я так понимаю он может эмитировать действия пользователя. Как парсить, пока что не понятно. Но в любом случае спасибо )

Answer 2

[Дима Паутов]

<!-- Для примера -->
<div id="data"></div>

fetch('https://www.cbr.ru/currency_base/daily/')
  .then(response => response.text())
  .then(data => {
    const parser = new DOMParser();
    const pageDOM = parser.parseFromString(data, "text/html");
    const tableData = pageDOM.querySelector('.data');
    
    // Для примера	
    const dataElement = document.getElementById('data');
    dataElement.innerHTML = tableData;

    console.log(tableData)
  });

P.S. вы можете прям щас зайти к ним на сайт, открыть панель разработчика, вкладку консоль и вставить туда js код. Получите в консоли таблицу с валютами.

Для бека суть такая же, только вам придётся использовать свой парсер для DOM. А в остальном суть такая же

Comments

[MyQuestion]

Спасибо!

const pageDOM = parser.parseFromString(data, "text/html");

В этом случае, что за параметр data? Он кастомный?

const tableData = pageDOM.querySelector('.data');
Это для работы с созданным div?

[Дима Паутов]

.then(data => { // Вот и переменная data

const tableData = pageDOM.querySelector('.data');

На спаршенной странице есть таблица, у неё класс data есть. По нему мы и берём таблицу

Не забудьте почитать, что такое new DOMParser(); и вопросы отпадут

[MyQuestion]

Дима Паутов, Спасибо!

Уже читаю )

[MyQuestion]

Дима Паутов, А как с этим справиться, не подскажите?)
Access to fetch at 'https://www.cbr.ru/currency_base/daily/' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

[Дима Паутов]

MyQuestion, это уже вам нужно читать про cors. Делая такие запросы из браузера, у вас врятли что-то выйдет, т.к. политика безопастности браузера запрещает делать кроссдоменные запросы.

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

[zkrvndm]

MyQuestion, запускайте код в консоли того сайта, который парсите.