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()。

一种骇人听闻的方法是仅删除包含更多且仅“示例”的div，方法是将"example "放在includes()中。如果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.includes()

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的类隐藏div，但是必须替换它包含的内容。抱歉，我无能为力。

使用香草javascript隐藏包含某些文本的标签

4 个答案: