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

Working JSFiddle here

请记住将脚本包含在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; }

上面的那个将匹配＆＃34; Thuis＆＃34;文本中包含单独的单词。如果要匹配任何字符串，请使用：

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

这是另一个解决方案：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

与chsdk's solution的主要区别在于我使用单个regexp test而非多个.indexOf()来电。 IMO更清洁，更灵活，也可能更高效。

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

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

只有在单词“＃34; Handtekening＆＃34;或＆＃34; Thuis＆＃34;发生在内容的开头（可能在一些空白之后）。用\b替换第二个\s*$也需要在匹配的单词之后没有任何内容（除了可能的空格）。

regexp文字末尾的i标志使匹配不区分大小写。如果不需要，可以简单地删除i。不过，我想把它包括在内作为说明目的。

聚苯乙烯。某些较旧的浏览器（例如，特别是Internet Explorer）可能不支持上述代码中使用的ES6 arrow functions和Array.from()方法。如果需要与这些旧浏览器的兼容性，这里有一个替代实现，没有任何这样的新奇东西：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

AFAICT，这应该与IE兼容到版本9，当然还有所有现代浏览器。

Answer 6

要根据文本选择元素，您可以使用js并检查文本是否等于要隐藏的文本。如果是，您可以将显示属性设置为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";
});

DEMO

• 在单独的数组中收集需要过滤的值。
• 迭代所有元素并检查其值在过滤器数组中的显示。
• 如果存在，只需隐藏它。

旁注：您可以使用类添加到捕获的元素，而不是插入内联样式。

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 here。

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添加/删除将隐藏值的类。

＆＃13;

＆＃13;

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

＆＃13;

.hide {
  display: none;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;