⬇️ Скачиваем и парсим HTML на JavaScript

Опубликовано: 6 января 2023 г.

Fetch API возвращает поток

Напомню, что ответ, который возвращает fetch(), представляет собой ReadableStream.

Чаще всего ты используешь метод json() для получения объекта JSON из возвращенного потока.

Например следующий код вернёт последнюю версию Minecraft:

let minecraftUrl = 'https://launchermeta.mojang.com/mc/game/version_manifest_v2.json';

fetch(minecraftUrl)
    .then((response) => response.json()) // Вызов API прошел успешно!
    .then((data) => console.log(data.latest.release)) // JSON из ответа
    .catch((err) => console.warn('Something went wrong.', err)); // Ошибка

Но как быть, если вместо JSON ты хочешь получить HTML?

Метод `text()`

Например, я хочу получить своё имя со своей страницы в Steam.

Хитрость заключается в использовании метода text() вместо метода json().
Метод возвращает текстовую строку HTML.

fetch('https://steamcommunity.com/id/_iiiypuk')
    .then((response) => { return response.text(); })
    .then((html) => { console.log(html); })
    .catch((err) => console.warn('Something went wrong.', err));

Примечание: это будет работать только при запуске на https://steamcommunity.com.
Ты получишь ошибку CORS, если попытаешься запустить код в другом месте.

Получение HTML из текстовой строки

Теперь, когда у тебя есть HTML в виде текстовой строки, ты можешь сделать с ним несколько вещей.

Вставить его в элемент с помощью innerHTML.
Преобразовать в HTML и манипулировать им.

fetch('https://steamcommunity.com/id/_iiiypuk')
    .then((response) => { return response.text() })
    .then((html) => {
        let parser = new DOMParser();
        let doc = parser.parseFromString(html, 'text/html');

        const realName = document.getElementsByClassName('header_real_name ellipsis');
        console.log(realName[0].children[0].innerText);
    })
    .catch((err) => console.warn('Something went wrong.', err));