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

这是另一种解决方案：

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()调用。在我看来，这更干净、更灵活，也可能更高效。

正则表达式中的锚点\b与单词边界匹配，因此eg"Thuis test"匹配但"Thuistest"不匹配。我怀疑这就是OP想要的，但如果不是，\b锚点可以很容易地被移除和/或用其他东西替换。例如，正则表达式：

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

仅当“Handtekening”或“Thuis”出现在内容开头（可能在一些空格之后）时才匹配。将第二个替换\b为\s*$还要求匹配的单词后面没有任何内容（可能除了空格）。

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 兼容，当然也与所有现代浏览器兼容。