使用 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，这需要更多的工作(递归函数(，但还不错。