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

准备工作

1. 首先我们要写一个CSS样式为了标记，搜索到对应的文本信息时让文字变色(本文标记为highlight)

2. 搜索的流程：

   • 获取搜索框的文字

   • 获取所选要匹配内容块的所有文字

   • 利用正则匹配 + 替换

3. 定位：找到查找到的文本在页面上的位置，利用jquery的animate和scrollTop改变滚动条

文中比较重要的选择器

1. .search_btn 查找按钮

2. #searchstr   输入的搜索文本

3. #box_div      搜索对应的文本框

4. .highlight   搜索到的文字变色class

5. #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, ''+searchText+'');

    $(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 = ''; 

     $( '#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。