使用原版 javascript 隐藏包含特定文本的标签

Question

我有这段代码隐藏了一个只包含一个特定单词的div，我一直在尝试（没有运气）隐藏任何包含这个词的div，但也包含更多文本。

任何帮助将不胜感激，谢谢！

let divs = document.getElementsByClassName('test');
for (let x = 0; x < divs.length; x++) {
    let div = divs[x];
    let content = div.innerHTML.trim();
  
    if (content == 'example') {
       div.style.display = 'none';
    }
}

<div class="test">
    ipsum
</div>
<div class="test">
    example
</div>
<div class="test">
    example complete
</div>

Answer 1

你可以

使用 JavaScript 的string.includes() 。

仅删除包含更多"examaple"的div的一种黑客方法是在includes()中"example "。这只会在 innerHTML 在"example"之后有一个空格时才删除div

let divs = document.getElementsByClassName('test');
for (let x = 0; x < divs.length; x++) {
    let div = divs[x];
    let content = div.innerHTML.trim();
  
    if (content.includes('example')) {
        div.style.display = 'none';
    }
}

<div class="test">
    ipsum
</div>
<div class="test">
    example
</div>
<div class="test">
    example complete
</div>

Answer 2

现代的东西...

document.querySelectorAll('.test').forEach((element, index) => {
   if (element.innerText.includes('example')) {
       element.style.display = 'none';
   }
})

<div class="test">ipsum</div>
<div class="test">example</div>
<div class="test">example complete</div>

文档：NodeList.prototype.forEach（）String.prototype.include（）

Answer 3

如果要

删除包含搜索词的div（用includes检查），但其中也有其他字符，可以将该词存储在变量中并检查文本是否比该长度长。

let divs = document.getElementsByClassName('test');
const word = 'example';
for (let x = 0; x < divs.length; x++) {
  let div = divs[x];
  let content = div.innerHTML.trim();
  if (content.includes(word) & content.length > word.length) {
    div.style.display = 'none';
  }
}

<div class="test">
ipsum
</div>
<div class="test">
example
</div>
<div class="test">
example complete
</div>

下面是该代码的现代化版本。

let divs = document.querySelectorAll('.test');
const word = 'example';
divs.forEach(div => {
  const { style, textContent } = div;
  const trimmed = textContent.trim();
  if (trimmed.includes(word) && trimmed.length > word.length) {
    style.display = 'none';
  }
});

<div class="test">
ipsum
</div>
<div class="test">
example
</div>
<div class="test">
example complete
</div>

Answer 4

当你执行div.innerHTML.trim()时，它需要整个div元素。

https://jsfiddle.net/ucvteLq7/7/

尝试搜索正则表达式，我认为，您不应该根据其类隐藏div，但您必须替换它包含的内容。对不起，我帮不上更多忙。