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

【问题标题】：Parse HTML String to DOM and convert it back to string将 HTML 字符串解析为 DOM 并将其转换回字符串
【发布时间】：2019-07-17 11:27:18
【问题描述】：

我有一个 HTML string 例如'<p><span class="text">Hello World!</span></p>'

我使用DOMParser().parseFromString() 将HTML string 解析为DOM，因为我想更改某些特定elements 的innerHTML。这就是为什么我 parse HTML string 到 DOM 和 getElementByClassName 我得到我所有的元素并循环通过它们来改变它 innerHTML。到目前为止，这有效。

更改innerHTML 后，我尝试将新的DOM 转换回string。我不知道怎么做。我尝试将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 的例子，但在我的情况下出了点问题。有什么想法吗？

【问题讨论】：

您在新的 DOMParser() 中缺少 ()。应该是(new DOMParser()).parseFromString(...)

标签： javascript html string parsing domparser

【解决方案1】：

DOMParser 总是会给你一个 document 作为回报。文档没有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);

【讨论】：