Javascript在选定元素中搜索字符串,并隐藏包含该字符串的html标签

小熊维尼

我编写了一个简单的javascript代码,以查找该字符串是否存在于选定元素的innerHtml中,现在我想隐藏包含该字符串的元素,但是我不确定如何获取标签ID或某些东西来隐藏指定的元素。这是我的代码。

 function hideTemplateOption(collToHide, hideText) {
    let collection = document.getElementsByClassName("product_tr_cus");
    if(collectionContains(collection,"test")) {
        console.log("contains");
    } else {
        console.log("nope");
    }
  }
  function collectionContains(collection, searchText) {
    for (var i = 0; i < collection.length; i++) {
        if( collection[i].innerText.toLowerCase().indexOf(searchText) > -1 ) {
            return true;
        }
    }
    return false;
  }
  hideTemplateOption();
立方的

您可以collection[i].style.display = 'none';有条件地或更好地设置它:

function toggle(collection, searchText) {
  var found = false;
  for (var i = 0; i < collection.length; i++) {
      var item_found = collection[i].innerText.toLowerCase().match(searchText);
      collection[i].style.display = item_found ? '' : 'none';
      if (item_found) {
          found = true;
      }
  }
  return found;
}

let collection = document.getElementsByClassName("product_tr_cus");
document.querySelector('input').addEventListener('keyup', function(event) {
   toggle(collection, event.target.value);
});
<input/>
<ul>
  <li class="product_tr_cus">Foo</li>
  <li class="product_tr_cus">Bar</li>
  <li class="product_tr_cus">Baz</li>
  <li class="product_tr_cus">Quux</li>
</ul>

如果想要相反的话,它将隐藏具有字符串的节点,然后使用:

collection[i].style.display = item_found ? '' : 'none';

并且您可能还需要为该函数使用更好的名称。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在字符串中包含隐藏的HTML元素-Javascript-数据表-jQuery

循环并隐藏包含字符串的元素

用于在列中搜索字符串并删除包含该字符串的整行的 VBA 脚本?

用html标签搜索字符串

每个标签上包含HTML的JavaScript拆分字符串

AngularJS-渲染字符串中包含的HTML标签

在Angular中显示包含HTML标签的字符串

在包含标签的html字符串中缩短字符串

如何从字典中搜索列表中的特定字符串并返回 mongodb 中包含该字符串的所有元素?

在元素中搜索特定字符串

简化搜索字符串中的html元素

在PHP多维数组中搜索部分字符串,然后返回包含该字符串的特定数组

在CSV文件中搜索字符串,将包含该字符串的所有行作为表格输出-PHP

在网页中搜索字符串,然后使用python打印包含该字符串的整行

C#搜索目录中包含字符串的所有文件,然后返回该字符串

如何在整个Pandas数据帧中搜索字符串,并获取包含该字符串的列的名称?

如何在多个文件中搜索特定字符串,并返回包含该字符串的所有文件的名称?

如何在列表中搜索字符串并输出包含该字符串的所有值?

如何从JavaScript中的字符串中剥离HTML标签?

从字符串中删除HTML标签

从字符串中删除html标签

在搜索字符串中包含打字稿/ JavaScript中的通配符的字符串时,在数组上进行搜索?

如何在字符串中搜索带有变量的子字符串,并用PHP将其替换为包含该子字符串变量的内容?

从JavaScript字符串中删除HTML标签

如何从字符串中预填充文本区域,该字符串在字符串之间包含<br />标签

在pandas dataframe列中搜索特定的字符串集,然后搜索该字符串

如何包含选定的子字符串?

在R中,如何搜索特定字符串中包含的字符向量元素?

MYSQL搜索字符串中是否包含特殊字符?