Конвертировать текст в HTML

Question

Чего я хочу достичь Внутри React Я хочу получить HTML-страницу с помощью fetch и из полученного ответа хочу извлечь некоторые данные из div с помощью класса myDiv

Данные, которые я получаю, представлены в формате HTML.В настоящее время у меня есть этот код, который извлекает данные и разрешает ответ в текстовом формате.

fetch('/my/url')
  .then(response => response && response.text())
  .then(text => console.log('Do something that extract content in class "myDiv"));

Answer 1

Вы можете сделать что-то вроде этого, просто старый Vanila JS.

//This is your fetched html string
let stringHTML = "<div> <h2>Some data</h2><div class='myDiv'> <h1> Test </h1> </div> </div>";
//Create temp element holder
let tempElement = document.createElement("div");
//Add fetched HTML to tempElement
tempElement.innerHTML = stringHTML;

//Now you can query it as it was a normal DOM element
let elementsWithClass = tempElement.getElementsByClassName("myDiv")

document.getElementById('root').appendChild(elementsWithClass[0]);

<div id='root'> 

</div>

Answer 2

Как сказано выше, вы можете использовать DOMParser

const parser = new DOMParser(),
  dom = parser.parseFromString(text, "text/html");

затем зайдите в дом с помощью привычных методов

let myDivContent = dom.querySelector('.myDiv').innerHTML;

Answer 3

HTML-элемент в строковом формате

var txt = JSON.stringify("<div class='c1'>Welcome</div>")

JSON.parse () преобразует строку в элемент html, т.е. [объект объекта]

document.getElementById("demo").innerHTML = JSON.parse(txt)

Answer 4

Попробуйте DOMParser , который анализирует исходный код XML или HTML из строки в документе DOM.

Пример:

const parser = new DOMParser();
const doc = parser.parseFromString(stringContainingHTMLSource, "text/html");
// returns a HTMLDocument, which also is a Document.

const myDiv = doc.querySelector('.myDiv');
console.log(myDiv.innerText);