原生js去除HTML字符串的換行和注釋

1. 去除HTML字符串的換行和注釋

首先測試HTML如下，放在一個自定義的script模板中：

<script id="tpl" type="text/template">
<!-- 這是注釋1 -->
<p>這是文本。</p>
<!-- 這是注釋2 -->
<ol>
    <li>列表</li>
    <li>列表</li>
    <li>列表</li>
</ol>
</script>

我們平常為了便於閱讀，同時維護方便，HTML模板是包含縮進和注釋的，但是實際解析和這些是不需要的，需要刪除，處理字符串正則替換這種方法以外，還可以試試使用瀏覽器原生的一些DOM API方法，例如DOMParse，JavaScript代碼如下：

var htmlTpl = tpl.innerHTML;
// 字符串轉換成文檔類型
var domParser = new DOMParser();
var doc = domParser.parseFromString(htmlTpl, 'text/html');

// 使用原生的TreeWalker進行遍歷
var treeWalker = document.createTreeWalker(doc);
var arrNodeRemove = [];
// 遍歷注釋節點和換行文本節點
while(treeWalker.nextNode()) {
    var node = treeWalker.currentNode;
    if (node.nodeType == Node.COMMENT_NODE || (node.nodeType == Node.TEXT_NODE && node.nodeValue.trim() == '')) {
        arrNodeRemove.push(node);
    }
}
// 節點移除
arrNodeRemove.forEach(function (node) {
    node.parentNode.removeChild(node);
});
// 字符串還原
console.log(doc.body.innerHTML);
// 輸出結果是：
// <p>這是文本。</p><ol><li>列表</li><li>列表</li><li>列表</li></ol>