将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");

但那会创建一个数组 douments. 显然，我不能使用innerHTML，因为我的 img 和 a href 标签。

Answer 1

你可以直接使用 createContextualFragment() 方法来解析XMLHTML字符串，这里是一个工作片段。

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)