將HTML字符串解析為DOM並將其轉換回字符串

Question

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

我使用DOMParser().parseFromString() HTML string解析為DOM ，因為我想更改某些特定elements的innerHTML 。 這就是為什么我將HTML string parse為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總是會給您一個文檔作為回報。 文檔沒有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);

將HTML字符串解析為DOM並將其轉換回字符串

問題描述

1 個解決方案

解決方案1
2 已采納 2019-07-17 11:29:48

將HTML字符串解析為DOM並將其轉換回字符串

問題描述

1 個解決方案

解決方案1 2 已采納 2019-07-17 11:29:48

解決方案1
2 已采納 2019-07-17 11:29:48