在javascript中替换html注释的快速方法

Question

假设你有一个来自服务器的带注释的html结构（注释是为了提高渲染速度，如FB）。之后我们应该删除我们的内容并允许浏览器渲染 html。最快的方法是什么？

Answer 1

可能使用jquery取消注释插件

Answer 2

您可以使用“content()”方法来获取所有节点，包括注释：轻量级且免费插件！！

然后你应该使用“filter()”方法过滤集合

$container
    .contents()
    .filter(function(){ return this.nodeType == 8; })
    .remove(); // replaceWith()  etc.

Answer 3

函数_removeComments（节点）{
    if (!node || !node.parentNode) 返回；

    if (node.nodeType == 8) {
        节点.parentNode.removeChild(节点);
        返回;
    }

    for (var c = node.firstChild; c; ) {
        var n = c.nextSibling;
        _删除评论(c);
        c = n;
    }
}

函数删除注释（元素）{
    元素.each(函数() {
        _removeComments(this);
    });
}

Answer 4

我们将获取注释的 DOM，然后执行

replace()

  var dom =  $.trim($('#domcontainer').html()).replace('<!--','').replace('-->','');

Answer 5

$(stringHtml).comments().remove();

...使用 jquery-comments 插件：

http://www.bennadel.com/blog/1563-jquery-comments-plug-in-to-access-html-comments-for-dom-templatating.htm

Answer 6

试试这个方法。为元素节点提供带注释的 HTML，这将删除注释块并显示 HTML。

function uncommentNode(node) {
    var nodestr = node.innerHTML;
    var noderevealHTML =  nodestr.replace(/<!--/ig, '').replace(/-->/ig, ''); // Update expressions here.
    node.innerHTML = noderevealHTML;
}

如果您注释的 HTML 包含三个或更多破折号 (<-- / <---) in the comment start/end tag, be sure to update the replace() expressions in the function above.

这里有一个 JSFIDDLE 以获得更好的解释。

Answer 7

用

document.querySelectorAll()

找到它们是不可能的。而

jQuery.contents()

不求深。

但是这个逻辑会收集所有评论——甚至是那些嵌套很深的评论。

let gatherer = (root) => { 

    return gatherer_rec(root).flat(Infinity);
};
let gatherer_rec = (node) => { 
    
    if (!(node instanceof Node)) {
        return [];
    } 

    if (root.nodeType === Node.COMMENT_NODE) {
        return [node];
    }

    return Array.from(node.childNodes).map((item) => gatherer(item));
};

一旦你有具体的评论，你完全可以使用jQuery方法来替换。

$(gatherer(document.body)[54]).replaceWith('hi');

根据您的需求进行调整。