Превратить массив HTML строк в массив тегов HTML

Question

У меня есть массив HTML строк:

["<h1>this is a title</h1>", "<a href=#>link</a>", "<img src="#" />","<p>a long paragraph</p>"]

Как бы я преобразовал их в массив тегов HTML, я в конечном итоге пытаюсь вернуть массив для рендеринга в React.

Я пытался использовать:

new DOMParser().parseFromString(string, "text/xml");

, но это создает массив doument с. Очевидно, я не могу использовать внутренний HTML из-за тегов img и a href.

Answer 1

Вы можете просто использовать createContextualFragment () метод для анализа строки XML / HTML, вот рабочий фрагмент:

let elements = ["<h1>this is a title</h1>", "<a href=#>link</a>", "<img src='#' />","<p>a long paragraph</p>"];

let container = document.getElementById('container');

elements.forEach((el, i) => {
  const fragment = document.createRange().createContextualFragment(el);
  console.log(fragment.children[0]);
  container.appendChild(fragment.children[0]);
})

<div id="container"></div>

Answer 2

Вы можете использовать метод массива map() и использовать DOMParser() для каждого элемента, чтобы получить такие теги, как:

const data = ["<h1>this is a title</h1>", "<a href=#>link</a>", "<img src='#' />", "<p>a long paragraph</p>"]
const res = data.map(tag => new DOMParser()
  .parseFromString(tag, "text/html")
  .querySelectorAll("*:not(html):not(head):not(body)")[0])

console.log(res)