65 lines
2.7 KiB
Markdown
65 lines
2.7 KiB
Markdown
---
|
||
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));
|
||
```
|