Fatal编程技术网

Javascript搜索子字符串

javascript function string

Javascript搜索子字符串,javascript,function,string,Javascript,Function,String,我正在尝试编写一个javascript函数，该函数将在html页面中的所有指定div中搜索搜索栏中包含的子字符串。我如何简单地做到这一点 这是到目前为止我的代码，我已经让它工作了，因此showMe方法将只显示所选的div，我现在只需要子字符串代码就可以了。有人能帮忙吗 <html> <head> <script type="text/javascript"> <!-- function dynamicSearch() { var va

我正在尝试编写一个javascript函数，该函数将在html页面中的所有指定div中搜索搜索栏中包含的子字符串。我如何简单地做到这一点

这是到目前为止我的代码，我已经让它工作了，因此
showMe
方法将只显示所选的div，我现在只需要子字符串代码就可以了。有人能帮忙吗

   <html>

<head>
<script type="text/javascript"> 
<!-- 
function dynamicSearch() {
    var val = document.getElementById('search').value;
    if (val == '')
      val = '-1';
    var srch = new RegExp(val, "gi");
    var els = document.getElementsByClassName('row');
    for (var idx in els) {
      if (idx != parseInt(idx))
        continue;
      var el = els[idx];
      if (typeof(el.innerHTML) !== 'undefined') {
        console.log(el.innerHTML);
        if (srch.test(el.innerHTML)) {
          el.style.display = 'block';
        } else {
          el.style.display = 'none';
        }
      }
    }
  }

function showMe (it, box) { 
var vis = (box.checked) ? "block" : "none"; 
document.getElementById(it).style.display = vis;
} 
//--> 
</script>
</head>

<body>

<form>
<label for="search">Search:</label>
            <input type="text" name="search" id="search" onkeyup="dynamicSearch()"/>

<input type="checkbox" name="modtype" value="value1" onclick="showMe('div1', this)" />value1

<input type="checkbox" name="modtype" value="value2" onclick="showMe('div2', this)" />value2

<input type="checkbox" name="modtype" value="value3" onclick="showMe('div3', this)" />value3

<input type="checkbox" name="modtype" value="value4" onclick="showMe('div4', this)" />value4

<input type="checkbox" name="modtype" value="value5" onclick="showMe('div5', this)" />value5

<div class="row" id="div1" style="display:none">Show Div 1</div>
<div class="row" id="div2" style="display:none">Show Div 2</div>
<div class="row" id="div3" style="display:none">Show Div 3</div>
<div class="row" id="div4" style="display:none">Show Div 4</div>
<div class="row" id="div5" style="display:none">Show Div 5</div>
</form>

</body>

</html>


搜索：
价值1
价值2
价值3
价值4
价值5
节目组1
节目组2
节目组3
节目组4
节目组5
使用jQuery，这类东西要容易得多

例如，您的
dynamicSearch
功能可以替换为：

function dynamicSearch() {
    var val = $('#search').val();
    if (val == '') val = '-1';
    var srch = new RegExp(val, "gi");

    $('.row').each(function(i, el) {
        if ($(this).text().match(srch)) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });
}
而且你也可以免费获得动画效果，而仅仅设置CSS
display
属性是不容易做到的

我已经做了一个工作，我想它能满足您的要求。

对不起，我不明白您所说的“在html页面中搜索所有指定的div以查找我的搜索栏中包含的子字符串”是什么意思。你能说得更具体一点吗？有什么问题吗？您的代码似乎已经工作了。