65 lines
2.7 KiB
Markdown
65 lines
2.7 KiB
Markdown
|
---
|
|||
|
title: "⬇️ Скачаиваем HTML и парсим на JavaScript"
|
|||
|
date: 2023-01-04T18:23:50+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));
|
|||
|
```
|