将HTML字符串解析为DOM并将其转换回字符串

Question

将HTML字符串解析为DOM并将其转换回字符串

16

我有一个HTML字符串，例如：'<p><span class="text">Hello World!</span></p>'

我使用DOMParser().parseFromString()将此HTML字符串解析为DOM，因为我想更改某些特定元素的innerHTML。这就是为什么我要解析HTML字符串为DOM并使用getElementByClassName获取所有元素并循环遍历它们以更改其innerHTML的原因。到目前为止，这个方法已经起作用。

在更改了innerHTML之后，我尝试将新的DOM转换回字符串，但我不知道该怎么做。我尝试过将innerHTML或outerHTML（两者都尝试过）赋值给变量，如下所示：

const parser = new DOMParser();
const doc = parser.parseFromString("<p>Hello World!</p>", "text/html");
console.log(doc.innerHTML) // undefined
console.log(doc.outerHTML) // undefined

const parser = new DOMParser();
const doc = parser.parseFromString("<p>Hello World!</p>", "text/html");
console.log(doc.innerHTML) // undefined
console.log(doc.outerHTML) // undefined

我总是得到 undefined。如何将其解析回 string？我找到了很多使用 innerHTML 或 outerHTML 的示例，但在我的情况下出现了问题。有什么想法吗？

- webta.st.ic

你在 new DOMParser() 中缺少了 ()。应该是 (new DOMParser()).parseFromString(...)。 - Ari Seyhun

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- CertainPerformance · Accepted Answer

DOMParser始终会返回一个文档。文档没有innerHTML属性，但document.documentElement有，就像页面的普通document对象一样：

const myHtmlString = '<p><span class="text">Hello World!</span></p>'
const htmlDom = new DOMParser().parseFromString(myHtmlString, 'text/html');
console.log(htmlDom.documentElement.innerHTML);

请注意，如果您没有自己传递这些标签，则会为您创建<head>和<body>。如果您只需要标签，请使用以下代码：

const myHtmlString = '<p><span class="text">Hello World!</span></p>'
const htmlDom = new DOMParser().parseFromString(myHtmlString, 'text/html');
console.log(htmlDom.body.innerHTML);