JS实现页面搜索+定位

相信很多小伙伴，在页面中不止一次用到过网页组合键ctrl+F的搜索功能吧，那它到底是怎么实现的呢？在一次项目中我也遇到了同样的问题，由于自己js基础甚差，索性求助于百度，几小时的搜索和整理终于劳有所获，整理了一段完整的js实现代码，贴出来，以便自己日后参考。

准备工作

首先我们要写一个CSS样式为了标记，搜索到对应的文本信息时让文字变色(本文标记为highlight)
搜索的流程：
- 获取搜索框的文字
- 获取所选要匹配内容块的所有文字
- 利用正则匹配 + 替换
定位：找到查找到的文本在页面上的位置，利用jquery的animate和scrollTop改变滚动条

文中比较重要的选择器

.search_btn 查找按钮
#searchstr 输入的搜索文本
#box_div 搜索对应的文本框
.highlight 搜索到的文字变色class
#tip 提示结果

代码实现

### 搜索 ###

$('.search_btn').click(highlight);//点击search时，执行highlight函数；
      $('#searchstr').keydown(function (e) {
          var key = e.which;
          if (key == 13) highlight();
      })
      
      var i = 0;
      var sCurText;
      function highlight(){
        clearSelection();//先清空一下上次高亮显示的内容；
        var flag = 0;
        var bStart = true;
        $('#tip').text('');
        $('#tip').hide();
        var searchText = $('#searchstr').val();
        var _searchTop = $('#searchstr').offset().top+30;
        var _searchLeft = $('#searchstr').offset().left;
        if($.trim(searchText)==""){
          showTips("请输入查找关键字",_searchTop,3,_searchLeft);
          return;
        }
        //获取你输入的关键字；
        var searchText = $('#searchstr').val();
        //创建正则表达式，g表示全局的，如果不用g，则查找到第一个就不会继续向下查找了；
        var regExp = new RegExp(searchText, 'g');
        var content = $("#box_div").text();
        if (!regExp.test(content)) {
          showTips("没有找到要查找的关键字",_searchTop,3,_searchLeft);
              return;
          } else {
              if (sCurText != searchText) {
                  i = 0;
                  sCurText = searchText;
               }
           }

### 替换 ###

$('td').each(function(){
    var html = $(this).html();
       //将找到的关键字替换，加上highlight属性；
    var newHtml = html.replace(regExp, '<span class="highlight">'+searchText+'</span>');
    $(this).html(newHtml);//更新；
    flag = 1;
});

### 滚动条 ###

if (flag == 1) {
   if ($(".highlight").size() > 1) {
       var _top = $(".highlight").eq(i).offset().top+$(".highlight").eq(i).height();
       var _left = $(".highlight").eq(i).offset().left;
       var _tipWidth = $("#tip").width();
       if (_left > $(document).width() - _tipWidth) {
            _left = _left - _tipWidth;
       }
       $("#tip").offset({ top: _top, left: _left });
       $("#search_btn").val("查找下一个");
   }else{
       var _top = $(".highlight").offset().top+$(".highlight").height();
       var _left = $(".highlight").offset().left;
       $('#tip').show();
   }
   $("html, body").animate({ scrollTop: _top - 50 });
   i++;
   if (i > $(".highlight").size() - 1) {
      i = 0;
    }
}

}
### 上次搜索标记清除 ###

function clearSelection(){
    $('div').each(function(){
    //找到所有highlight属性的元素；
        $(this).find('.highlight').each(function(){
            $(this).replaceWith($(this).html());//将他们的属性去掉；
        });
    });
}

### 提示框 ###

var tipsDiv = '<div class="tipsClass"></div>'; 
     $( '#bdiv' ).append( tipsDiv );
     function showTips( tips, height, time,left ){ 
         var windowWidth = document.documentElement.clientWidth; 
         $('.tipsClass').text(tips);
         $( 'div.tipsClass' ).css({ 
            'top' : height + 'px', 
            'left' :left + 'px', 
            'position' : 'absolute', 
            'padding' : '8px 6px', 
            'background': '#000000', 
            'font-size' : 14 + 'px', 
            'font-weight': 900,
            'margin' : '0 auto', 
            'text-align': 'center', 
            'width' : 'auto', 
            'color' : '#fff', 
            'border-radius':'2px', 
            'opacity' : '0.8',
            'box-shadow':'0px 0px 10px #000',
            '-moz-box-shadow':'0px 0px 10px #000',
            '-webkit-box-shadow':'0px 0px 10px #000'
        }).show();
        setTimeout( function(){$( 'div.tipsClass' ).fadeOut();}, ( time * 1000 ) );
      } 
    })

总结

遇到问题的时候，网上虽说有大把的资料和代码可以copy，但是自己在copy的时候，也要把别人写的代码摸透彻，知道每一步是做什么的，有什么作用。最好是做一个记录，也方便以后用的时候一下就能用最快的方法使用它。

前端的技术还是需要去学习的，毕竟一个只会后端的PHP不是一个好PHP。要做一个好的PHP。