javascript - 使用 JavaScript 删除两个评论标签之间的所有内容

Question

如何删除两个标签之间不在标准标签中的所有内容；

<!--googleoff: index-->
    some codes and content here...
<!--googleon: index-->

这是在一个网站上展示的广告，我想通过用户 JS 阻止并删除浏览器中的主题

Answer 1

这些是注释节点，而不是标签。最好的办法可能是识别父级，然后循环子级；见评论:

// Assuming a single parent
let parent = document.querySelector(".stuff");
if (parent) {
    // Uncomment if you want to see nodes before the change
    // showNodes("before", parent);
    let removing = false;
    let child = parent.firstChild;
    let next = null;
    // While we still have child elements to process...
    while (child) {
        // If we're already removing, remember that
        let removeThis = removing;
        // Before we remove anything, identify the next child to visit
        next = child.nextSibling;
        // Is this a comment node?
        if (child.nodeType === Node.COMMENT_NODE) {
            if (child.nodeValue.includes("googleoff: index")) {
                // It's the node that tells us to start removing:
                // Turn on our flag and also remove this node
                removing = true;
                removeThis = true;
            } else if (child.nodeValue.includes("googleon: index")) {
                // It's the node that tells us to stop removing:
                // Turn off our flag, but do remove this node
                removing = false;
                removeThis = true;
            }
        }
        if (removeThis) {
            // This is either stuff in-between the two comment nodes
            // or one of the comment nodes; either way, remove it
            parent.removeChild(child);
        }

        // Move on to next child
        child = next;
    }
    // Uncomment if you want to see nodes before the change
    // showNodes("after", parent);
}

实例:

// Brief delay so you can see it happen
setTimeout(() => {
    // Assuming a single parent
    let parent = document.querySelector(".stuff");
    if (parent) {
        // Uncomment if you want to see nodes before the change
        // showNodes("before", parent);
        let removing = false;
        let child = parent.firstChild;
        let next = null;
        // While we still have child elements to process...
        while (child) {
            // If we're already removing, remember that
            let removeThis = removing;
            // Before we remove anything, identify the next child to visit
            next = child.nextSibling;
            // Is this a comment node?
            if (child.nodeType === Node.COMMENT_NODE) {
                if (child.nodeValue.includes("googleoff: index")) {
                    // It's the node that tells us to start removing:
                    // Turn on our flag and also remove this node
                    removing = true;
                    removeThis = true;
                } else if (child.nodeValue.includes("googleon: index")) {
                    // It's the node that tells us to stop removing:
                    // Turn off our flag, but do remove this node
                    removing = false;
                    removeThis = true;
                }
            }
            if (removeThis) {
                // This is either stuff in-between the two comment nodes
                // or one of the comment nodes; either way, remove it
                parent.removeChild(child);
            }

            // Move on to next child
            child = next;
        }
        // Uncomment if you want to see nodes before the change
        // showNodes("after", parent);
    }
}, 800);


function showNodes(label, parent) {
    console.log(label);
    for (let child = parent.firstChild; child; child = child.nextSibling) {
        console.log(child.nodeType, child.nodeValue);
    }
}

<div>
  Just some content that isn't related
</div>
<div class="stuff">
  This is the parent element
  <!--googleoff: index-->
  some codes and content here...
  <!--googleon: index-->
</div>

如果这些东西出现在多个地方，显然将其包装在一个循环中。

如果您无法识别父级，则必须一路遍历 DOM，这需要更多工作(递归函数)，但也不是那么糟糕。