隱藏包含特定文本的 div

Question

我想根據里面的文字隱藏一個 div。 在下面的示例中，我想隱藏帶有“Handtekening”的那些和帶有“Thuis”的那些。 我更喜歡用 CSS 來做到這一點。 這可能嗎？

divs的類名必須相同...

<div class="test">
     Pakket
</div>
<div class="test">
     Handtekening
</div>
<div class="test">
     Thuis
</div>

如果使用 CSS 無法實現，那么如何使用 JavaScript 來實現？

Answer 1

這是一個簡單的 vanilla Javascript 解決方案：

let divs = document.getElementsByClassName('test');

for (let x = 0; x < divs.length; x++) {
    let div = divs[x];
    let content = div.innerHTML.trim();

    if (content == 'Handtekening' || content == 'Thuis') {
        div.style.display = 'none';
    }
}

在這里工作 JSFiddle

請記住在 HTML 頁面的末尾（就在</body>標記之前）包含腳本。

Answer 2

如果您可以控制 HTML 輸出並且文本文檔變大兩倍沒有問題，您可以復制每個 div 的內容。 否則 JavaScript 是要走的路。 這是CSS解決方案：

<div class="test" content="Pakket">
Pakket
</div>
<div class="test" content="Handtekening">
Handtekening
</div>
<div class="test" content="Thuis">
Thuis
</div>

然后將選擇器用於包含字符串的屬性：

div[content~=Thuis] { display:none; }

當“Thuis”作為單獨的詞包含在文本中時，上面的將匹配。 如果你想匹配任何出現的字符串，你應該使用：

div[content*=and] { display:none; }

Answer 3

不，純 CSS 是不可能的。 你需要使用 JavaScript 來做到這一點。

這是您可以使用的代碼：

var divs = document.querySelectorAll(".test");
Array.from(divs).forEach(function(div) {
  if (div.textContent.indexOf("Handtekening") >= 0 || div.textContent.indexOf("Thuis") >= 0) {
    div.style.display = "none";
  }
});

 var divs = document.querySelectorAll(".test"); Array.from(divs).forEach(function(div) { if (div.textContent.indexOf("Handtekening") >= 0 || div.textContent.indexOf("Thuis") >= 0) { div.style.display = "none"; } });

 <div class="test"> Pakket </div> <div class="test"> Handtekening </div> <div class="test"> Thuis </div>

Answer 4

你可以用第二個class來做隱藏元素的簡單事情。

因此，假設我們將添加class="hidden" 。

請參閱下面的示例：

 .test { color: blue; } .hidden { display: none; /* or visibility: hidden; */ }

 <div class="test"> Pakket </div> <div class="test hidden"> Handtekening </div> <div class="test hidden"> Thuis </div>

通過添加第二個class我們可以選擇要顯示和不顯示的<div>元素。

Answer 5

這是另一種解決方案：

 Array.from( document.querySelectorAll('div.test') ) .filter( node => /\\b(Handtekening|Thuis)\\b/i.test(node.textContent) ) .forEach( node => node.style.display = 'none' );

 <div class="test"> Pakket </div> <div class="test"> HANDTEKENING </div> <div class="test"> Test thuis blah blah </div>

與chsdk 解決方案的主要區別在於，我使用的是單個正則表達式測試，而不是多個.indexOf()調用。 IMO 這更干凈、更靈活，也可能更高效。

---

正則表達式中的\\b錨點匹配單詞邊界，因此例如"Thuis test"匹配但"Thuistest"不匹配。 我懷疑這就是 OP 想要的，但如果不是， \\b錨可以很容易地被刪除和/或替換為其他東西。 例如，正則表達式：

/^\s*(Handtekening|Thuis)\b/i

僅當“Handtekening”或“Thuis”出現在內容的開頭（可能在一些空格之后）時才會匹配。 用\\s*$替換第二個\\b還要求匹配的單詞后沒有任何內容（可能除了空格）。

正則表達式文本末尾的i標志使匹配不區分大小寫。 如果不需要，可以簡單地刪除i 。 不過，我想將它包括在內以進行說明。

---

附言。 一些較舊的瀏覽器（例如，特別是 Internet Explorer）可能不支持上面代碼中使用的 ES6 箭頭函數和Array.from()方法。 如果需要與此類舊瀏覽器兼容，這里有一個沒有任何此類新奇事物的替代實現：

 var nodes = document.querySelectorAll('div.test'); for (var i = 0; i < nodes.length; i++) { if ( /\\b(Handtekening|Thuis)\\b/i.test(nodes[i].textContent) ) { nodes[i].style.display = 'none'; } }

 <div class="test"> Pakket </div> <div class="test"> HANDTEKENING </div> <div class="test"> Test thuis blah blah </div>

AFAICT，這應該兼容 IE 到版本 9，當然也兼容所有現代瀏覽器。

Answer 6

要根據文本選擇元素，您可以使用 js 並檢查文本是否等於要隱藏的元素。 如果是，您可以將 display 屬性設置為none以隱藏該元素。

 [...document.querySelectorAll('.test')].forEach(function(e) { if (['Handtekening', 'Thuis'].includes(e.textContent.trim())) { e.style.display = 'none' } })

 <div class="test"> Pakket </div> <div class="test"> Handtekening </div> <div class="test"> Thuis </div>

Answer 7

你可以這樣做，就像這樣

let filteredOut = ['Handtekening', 'Thuis'];

Array.from(document.querySelectorAll(".test")).forEach((elm) => {
 if(filteredOut.includes(elm.textContent.trim())) elm.style.display = "none";
});

演示

• 收集需要在單獨數組中過濾掉的值。
• 迭代所有元素並檢查其值出現在過濾器數組中。
• 如果它存在，只需隱藏它。

旁注：您可以使用類添加到捕獲的元素，而不是插入內聯樣式。

Answer 8

你可以用 JavaScript 做到：

 var elements = document.getElementsByClassName('test'); for(var i = 0; i<elements.length; i++){ if(elements[i].innerText==='Handtekening' || elements[i].innerText==='Thuis'){ elements[i].style.display = 'none'; } }

 <div class="test"> Pakket </div> <div class="test"> Handtekening </div> <div class="test"> Thuis </div>

Answer 9

這是純 JavaScript 解決方案：

// Define your variables
var objectsToCheck = document.getElementsByClassName("test");
var hideText = "Pakket";

// Loop through your div objects
[].forEach.call(objectsToCheck, function (o) {

  // Check if text appears in div under class "test"
  if(o.innerText.toLowerCase() == hideText.toLowerCase()){
      o.style.display = "none";
  }
});

Answer 10

• 使用 CSS 3：否
• 使用 JavaScript：是
• 使用 XPath：是（類似於 //div[contains(text(),'Handtekening')]/。）

您可以在此處測試您的 XPath。

Answer 11

如果您已經使用了這個庫，那么您還有 jQuery 可以使這變得容易： contains(text) 。

text：要查找的文本字符串。 它區分大小寫。

匹配的文本可以直接出現在所選元素中、該元素的任何后代中，或者它們的組合中。 與屬性值選擇器一樣，:contains() 括號內的文本可以寫成一個空詞或用引號括起來。 要選擇的文本必須具有匹配的大小寫。

$( ".test:contains('Thuis'),.test:contains('Handtekening')" ).css( "display", "none" );

https://codepen.io/gc-nomade/pen/zEMbLz

Answer 12

您可以使用querySelector獲取元素並使用element.classList.toggle添加/刪除將隱藏值的類。

 document.querySelector('#btn').addEventListener('click', function(){ var text = document.querySelector('#txt').value.trim(); var list = document.querySelectorAll('.test'); for(var i = 0; i< list.length; i++) { list[i].classList.toggle('hide', list[i].textContent.trim() === text); } })

 .hide { display: none; }

 <div class="test"> Pakket </div> <div class="test"> Handtekening </div> <div class="test"> Thuis </div> <input type='text' id='txt' /> <button id='btn'>Hide Div</button>