当需要在页面中查找某个关键字时，一是可以通过浏览器的查找功能实现，二是可以通过前端脚本准确查找定位，本文介绍通过jQuery实现的页面内容查找定位的功能，并可扩展显示查找后的相关信息

本文以查找车站名为例，仿12306官网查找车站售票时间页面效果，当用户输入关键字点击查找按钮或按回车键时，jQuery通过正则匹配内容，准确匹配关键字，并迅速将页面定位滚动到第一个匹配的位置，并显示相关信息（本例中附加信息为车站开始售票时间）。   HTML   页面需要放置一个输入框用来输入要查找的关键字，以及一个查找按钮，然后就是主体内容#content，里面包含着n个<p>，即每个时间段开售车票的车站名。   代码如下: <div id="search_box">      <input class="textbox" id="searchstr" type="text" size="10" name="searchstr" />　      <input class="sbttn" id="search_btn" type="button" value="页内查找" />  </div>  <div id="content">      <p><strong>8：00 起售车站</strong><br />  　　安阳、白城、北京西、成都东、大庆、大庆西、东莞、东莞东、惠州、金华南、缙云、九江、兰州、丽水、临汾、南充、  齐齐哈尔、青田、日照、山海关、汕头、松原、温州、乌兰浩特、乌鲁木齐、武昌、武义、西安、永康、运城。</p>      ....此处省略n个p  </div>      CSS   简单的对页面内容进行CSS设置，其中.highlight和#tip分别用来设置查找结果高亮显示和信息提示框显示的样式效果，后面我们会介绍到。    代码如下: #search_box { background: white; opacity: 0.8; text-align:right }  #search_btn { background: #0f79be; margin-top: 6px; border-radius: 2px; border: 0px;   width: 100px; line-height: 24px; color: white; }  #searchstr { font-size: 14px; height: 20px; }  .highlight { background: yellow; color: red; }  #tip { background: #ffc; border: 1px solid #999; width: 110px; text-align: center;   display: none; font-size: 12px; }      jQuery   首先，我们要实现一个固定div的效果，就是当页面往下拉滚动时，用于查找的输入框和按钮始终固定在页面的最顶部，方便继续查找。    代码如下: (function($) {      $.fn.fixDiv = function(options) {          var defaultVal = {              top: 10          };          var obj = $.extend(defaultVal, options);          $this = this;          var _top = $this.offset().top;          var _left = $this.offset().left;          $(window).scroll(function() {              var _currentTop = $this.offset().top;              var _scrollTop = $(document).scrollTop();              if (_scrollTop > _top) {                  $this.offset({                      top: _scrollTop + obj.top,                      left: _left                  });              } else {                  $this.offset({                      top: _top,                      left: _left                  });              }          });          return $this;      };  })(jQuery);      接着，我们调用fixDiv()。     代码如下: $(function(){      $("#search_box").fixDiv({ top: 0 });  });      接下来，最关键的实现查找功能。当输入关键字后，点击查找按钮或按回车键，调用查找函数highlight()。     代码如下: $(function(){      ...      $('#search_btn').click(highlight);//点击search时，执行highlight函数；      $('#searchstr').keydown(function (e) {          var key = e.which;          if (key == 13) highlight();      })      ...  });      在函数highlight()需要做很多事情，1.清空上次高亮显示内容，2.隐藏并清空提示信息，3.判断输入内容为空的情况，4.获取输入的关键字，并与页面内容进行正则匹配，并用flag标记查找到结果，将查找结果高亮显示，5.根据查找结果的数量，确定提示信息的内容和位置偏移量，准确定位并显示提示信息。请看具体代码：   代码如下: $(function(){      ...      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();//获取你输入的关键字；          var regExp = new RegExp(searchText, 'g');//创建正则表达式，g表示全局的，如果不用g，                    //则查找到第一个就不会继续向下查找了；          var content = $("#content").text();          if (!regExp.test(content)) {              showTips("没有找到要查找的车站",_searchTop,3,_searchLeft);              return;          } else {              if (sCurText != searchText) {                  i = 0;                  sCurText = searchText;               }          }          //高亮显示          $('p').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();          &nb