[英]Turn array of HTML Strings into an array of HTML tags
我有一个 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
数组。 显然,由于img
和a href
标签,我不能使用 innerHTML。
您可以只使用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>
您可以使用数组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)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.