隐藏包含特定文本的 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>