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

Question

我有一个 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 的例子，但在我的例子中出了点问题。有什么想法吗？

Answer 1

DOMParser 将始终在 return 中为您提供文档。文档没有 innerHTML 属性，但是 document.documentElement 有，就像页面的正常 document object:

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>。如果您只想要 body，那么：

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

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

Parse HTML String to DOM and convert it back to string

html

javascript

string

parsing

domparser