Blog/content/posts/2023/javascript/fetch-html.md

---
title: "⬇️ Скачиваем и парсим HTML на JavaScript"
date: 2023-01-06T12:16:00+03:00
draft: false
tags: [tutorial, javascript]
---

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

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

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

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

```javascript
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.

```javascript
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 в виде текстовой строки,
ты можешь сделать с ним несколько вещей.

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

```javascript
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));
```