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

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 子节点，如果子节点包含字符串，return 为真。

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

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

不return -1（Returns true 包含单词）：

<div>Word</div>

<p>Word</p>

是否 return -1（Returns false to containing the word）：

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

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

非常感谢对此的任何帮助，谢谢！

Answer 1

您可以遍历元素的子节点，专门针对文本节点类型进行过滤并查找因为空格会导致空文本节点，运行 a trim 作为测试的一部分。

function containsText(element) {
  return Array.from(element.childNodes)
  .some(n=>n.nodeType === 3 && n.textContent.trim().length);
}

我们可以采用这个基本元素 "contains text" 逻辑并对其进行修改以支持您的特定测试：

function containsText(text, element) {
  return Array.from(element.childNodes)
  .some(n=>n.nodeType === 3 && n.textContent.indexOf(text) !== -1);
}

然后将其用作循环内的条件：

if (containsText('Word', current)) {
  current.parentNode.removeChild(current);
}

Answer 2

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])   
}

Answer 3

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

    if(current.children.length > 0){
        continue;
    }

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

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

How to remove elements that directly contain a string - ignoring child elements

html

javascript

children

indexof