javascript - 如何在具有可折叠部分的单个 HTML 页面上执行 "find"函数？

Question

我使用 Twitter Bootstrap 创建了一个包含可折叠部分的帮助页面。这是一个最小的代码示例:

<div class="accordion" id="accordion2">

<div class="panel-heading">
  <h4 class="panel-title">
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
      Sample heading one
    </a>
  </h4>
</div>
<div id="collapseOne" class="accordion-body collapse">
  <div class="panel-body">
    <p>Sample paragraph one</p>
  </div>
</div>  

<div class="panel-heading">
  <h4 class="panel-title">
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
      Sample heading two
    </a>
  </h4>
</div>
<div id="collapseTwo" class="accordion-body collapse">
  <div class="panel-body">
    <p>Sample paragraph two</p>
  </div>
</div>  

</div>

而不是设置数据库、索引页面、添加搜索框和创建搜索结果页面；我想允许用户使用类似于浏览器自带的“查找”功能的“查找”功能，即键入一个词，找到匹配的词，然后在单击时移动到下一个词。

由于我的页面充满了可折叠的部分，我希望该部分在找到时展开。所以我的问题是如何在具有可折叠部分的单个 HTML 页面上执行“查找”功能？

Answer 1

这可能是一个程序化的锤子，但它应该可以解决问题:

关于 jsFiddle 的完整注释代码如果不清楚发生了什么

$('#find').click(function(){
    var btn = $(this);
    btn.prop("disabled",true); 
    var term = $('#term').val(); 
    $('.collapse').collapse("hide"); 
    var rd = new RegExp('<span class="found">('+term+')<\/span>', "ig");
    $('#accordion2').html( $('#accordion2').html().replace(rd, '$1' ) ); 
    var occurences=[]; 
    $('#accordion2 .panel-body').each(function(i,e){ 
        var r = new RegExp('('+term+')', "ig"); 
        if( $(this).html().match(r) ){ 
            var matches = $(this).html().match(r); 
            $.each(matches, function(){ 
                occurences.push(i); 
            });
            $(this).html( $(this).html().replace(r, '<span class="found">$1</span>') );  
        }
    });
    var l =occurences.length; 
    var c = Number( $('#current').html() ); 
        c =  c > 0 ? c+1: 0;  
        c =  c > l ? 1 : c; 
        c =  c == 0 && l > 0 ? 1 : c ; 
    $('#count').html( l > 0 ? ' of '+ l : ' matches found in document');  
    $('#current').html( c ); 
    if(c != 0){
        $('#accordion2 .accordion-toggle').eq( occurences[c-1] ).click(); 
        $('.found').eq(c-1).focus();
    }
    setTimeout(function() { btn.prop("disabled",false); }, 1000); 
});

// reset everything if the user starts typing again
$('#term').keydown(function(){
    var term = $('#term').val(); 
    var rd = new RegExp('<span class="found">('+term+')<\/span>', "ig"); 
    $('#accordion2').html( $('#accordion2').html().replace(rd, '$1' ) ); 
    $('#count').html(''); // reset our labels
    $('#current').html('');
});

.found{
  background-color:yellow;
}
span{
    margin-left:15px;
    font-size:16px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<input type="text" id="term" value="cool" placeholder="search.."/><input type="button" id="find" value="Find"/><div id="labels"><span id="current"></span><span id="count"></span></div>
<div class="accordion" id="accordion2">

<div class="panel-heading">
  <h4 class="panel-title">
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
      Sample heading one
    </a>
  </h4>
</div>
<div id="collapseOne" class="accordion-body collapse">
  <div class="panel-body">
    <p>Cool sample paragraph one</p>
  </div>
</div>  

<div class="panel-heading">
  <h4 class="panel-title">
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
      Sample heading two
    </a>
  </h4>
</div>
<div id="collapseTwo" class="accordion-body collapse">
  <div class="panel-body">
    <p>Cool sample paragraph two</p>
  </div>
</div>  

<div class="panel-heading">
  <h4 class="panel-title">
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
      Sample heading three
    </a>
  </h4>
</div>
<div id="collapseThree" class="accordion-body collapse">
  <div class="panel-body">
    <p>Cool sample paragraph one</p>
  </div>
</div>  

<div class="panel-heading">
  <h4 class="panel-title">
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour">
      Sample heading four
    </a>
  </h4>
</div>
<div id="collapseFour" class="accordion-body collapse">
  <div class="panel-body">
    <p>Cool sample paragraph two cool</p>
  </div>
</div>  
    
</div>