javascript - 如何删除直接包含字符串的元素 - 忽略子元素

Question

我正在尝试找出如何使用纯 JavaScript 删除页面上包含特定字符串的元素。

这是我目前的代码:

var elements = document.querySelectorAll("body > *");
for (var i = 0, len = elements.length; i < len; i++) {
    var current = elements[i];

    if (current.innerHTML.indexOf("Word") !== -1) {
        current.parentNode.removeChild(current);
    }
}

这能够删除包含短语“word”的元素。但是，它会向下挖掘一个 div 子节点，如果子节点包含该字符串，则返回 true。

我该如何更改它，以便它检查元素是否直接包含字符串并在搜索当前元素时忽略子元素。

代码仍应搜索每个元素，但不会进入子节点。

不返回 -1(返回 true 以包含该词):

<div>Word</div>

<p>Word</p>

是否返回 -1(返回 false 以包含该词):

<div><p>Word</p></div>

<div><div>Word</div></div>

非常感谢任何帮助，谢谢!

Answer 1

var word = "Word"
var elements = document.querySelectorAll("body > *");
function removeContainingText(element) {
  var children = Array.from(element.childNodes)
  for (var i = 0; i<children.length; ++i){
    if (children[i].nodeType == 3){
        if (children[i].nodeValue.indexOf(word) !== -1) {
            children[i].parentNode.removeChild(children[i]);
        }
    }
  }
}
for (var k = 0; k < elements.length; ++k){
    removeContainingText(elements[k])   
}