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

这可以删除包含短语＆＃34; word＆＃34;的元素。但是，它会深入到divs子节点，如果子节点包含字符串，则返回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])   
}

Answer 2

您可以迭代元素的childNodes，专门为文本nodeType过滤并查找因为空格可以导致空文本节点，所以在测试过程中运行修剪。

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

我们可以将这个基本元素“包含文本”逻辑并修改它以支持您的特定测试：

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

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

3 个答案: