原生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>