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

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”的元素。 但是，它會深入到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);
}

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