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

我想了解如何使用普通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>

會非常感謝任何幫助，謝謝！

來源

2017-09-02 Osman

「字」= 「字」 – forrestmid

@forrestmid哎呦，更新！ – Osman

簡單的js是一項要求嗎？如果你使用jquery，會更容易。 –

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

來源

2017-09-02 19:57:43

試試這個，只需將頂部的單詞的值更改爲您需要刪除的單詞的值。 –

謝謝！我通過用'*'來替換'body> *'來實現它的功能 - 它似乎不適用於'body>'部分 – Osman

您可以迭代元素的childNodes，專門針對文本nodeType進行過濾並查找。因爲空白可以導致空的文本節點，所以在測試中運行trim。

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

來源

2017-09-02 19:40:10

謝謝你提供這個！雖然我怎麼能在我的代碼中實現這個？ – Osman

更新了特定於您的用例的示例。 –

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

來源

2017-09-02 20:16:20

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

回答

相關問題