jQuery 实现页面关键字查询

今天在项目中用到了页面关键字搜索，总结一下使用心得和遇见的问题
使用的是JavaScript中的 RegExp(正则表达式）对象，
var regExp = new RegExp(keyword,'g');
// keyword：是关键字， 
g：执行全局匹配，如果不输入的话将会查一条，
i：执行大小写不敏感匹配，
m：执行多行匹配


然后调用 test()方法进行匹配查找就可以了，此时regExp内容就是 \keyword\g 一个正则表达式
regExp.test("text")；
//text：需要匹配的内容
之后只要将找到的关键字替换，加上标记颜色就行了
$('#textContent').each(function() {
            var html = $(this).html();//获取当前对象的文本内容
            var newHtml = html.replace(regExp, '<span class="highlight" style="color:red;font-size:15px;">' + keyword +'</span>');
            $(this).html(newHtml);//更新
        }); 
因为考虑到用户体验所以又写了一个滚动条自动到标记处的方法
var j = 0;
function moveScroll(){
if (j > $(".highlight").size() - 1) {//判断查询到了多少个内容
                 j = 0;
        }
if($(".highlight").size()>1){
  //然后在文本容器中查找class属于为highlight与浏览器顶部距离
  var top =$("#textContent").find(".highlight")[j].offsetTop;
      $("#textContent").animate({scrollTop: top});
      j++;   
  }
}
完整代码 ：
可以进行多词查找，支持IE8 
function search(){
var keyword=$(".keyword").val();
if(keyword==""){
return;
}
//查询前要先替换成原始的文本
$("#textContent").html("<pre class='textContent' style='font-size:15px'>"+me.getView().textContent+"</pre>");
keyword=keyword.trim();
var index = keyword.lastIndexOf("，");
var dex = keyword.lastIndexOf(",");
var arr;
if (index != -1) {
arr = keyword.split("，");
} else if (dex != -1) {
arr = keyword.split(",");
} else {
arr = keyword.split(" ");
}
var length = arr.length;
for (var i = 0; i < length; i++) {
highlight(arr[i],me.getView().textContent);
}
moveScroll();
$("#searchTab_ex #num").text($(".highlight").size());//向页面显示有查询多少条数据
}


function highlight(keyword,textContent){
var regExp = new RegExp(keyword, 'g')
if (!regExp.test(textContent)) {
            return;
        }
$('#textContent').each(function() {
            var html = $(this).html();
            var newHtml = html.replace(regExp, '<span class="highlight" style="color:red;font-size:15px;">' + keyword + '</span>');//将找到的关键字替换
            $(this).html(newHtml);//更新；
        });       
}

var j = 0;
function moveScroll(){
if (j > $(".highlight").size() - 1) {
              j = 0;
        }
if($(".highlight").size()>1){
var top =$("#textContent").find(".highlight")[j].offsetTop;
    $("#textContent").animate({scrollTop: top});
    j++;   
  }
}