JS实现页面搜索+定位

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

准备工作

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

  2. 搜索的流程:

    • 获取搜索框的文字

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

    • 利用正则匹配 + 替换

  3. 定位:找到查找到的文本在页面上的位置,利用jqueryanimatescrollTop改变滚动条

文中比较重要的选择器

  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, '<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。

添加新评论