將DOM元素轉換為原始HTML字符串

Question

關於此類問題的大多數答案都建議使用innerHTML和outerHTML 。 但是我沒有得到我想要的。 例如：

var el = document.createElement("DIV");
el.innerHTML = "<span><% blabla %></span>";
// let's say that el is actually initialized with document.getElementById
// and el = <div><span><% blabla %></span></div>
console.log(el.outerHTML);

上面代碼的結果是

"<div><span>&lt;% blabla %&gt;</span></div>"

因此，問題出在<和>以及我沒有得到它們的事實。 好的，我知道瀏覽器的行為很正常，我可以使用.replace(/&lt;/g, '<').replace(/&gt;/g, '>')來解決此問題。 但是請檢查以下內容：

el.innerHTML = "<span><% for(var i=0; i<list.length; i++) { %> bla bla <% } %>";
console.log(el.outerHTML);

結果無法修復：

<div><span>&lt;% for(var i=0; i<list.length; i++)="" {="" %=""> bla bla &lt;% } %&gt;</list.length;></span></div>

任何解決此問題的想法。

編輯：

我發現問題出在for循環中的<符號中。 因此，如果我用for(var i in list)替換它，則outsideHTML返回正確的值。

Answer 1

這是一個骯臟的把戲，如果您需要對該字符串進行一些“笨拙”的操作，可能不會有所幫助，但是如果您不介意讓瀏覽器為您完成部分工作，則可以完成此工作：

您可以在div中“顯示”它，然后在js中再次顯示它，然后得到確切的html字符串。

例如：

 var string = "< blabla >";
 $('converterDiv').html(string); // jQuery because I'm lazy
 var convertedString = $('converterDiv').html();

同樣，...是一個“壞”的把戲，但可能會幫助您。