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

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

这是能够去除包含短语“字”的元素。但是，它会深入到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进行过滤并查找。因为空白可以导致空的文本节点，所以在测试中运行trim。

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

• https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some

我们可以把这个基本要素 “包含文字” 逻辑并将其修改为支持特定测试：

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