如何通过js使搜索关键词高亮

      给你推荐通过jquery来实现高亮关键词。jquery.textSearch-1.0.js代码：

1. (function($){
2.     $.fn.textSearch =function(str,options){
3.         var defaults ={
4.             divFlag:true,
5.             divStr:" ",
6.             markClass:"",
7.             markColor:"red",
8.             nullReport:true,
9.             callback:function(){
10.                 returnfalse;  
11.             }
12.         };
13.         var sets = $.extend({}, defaults, options ||{}), clStr;
14.         if(sets.markClass){
15.             clStr ="class='"+sets.markClass+"'";  
16.         }else{
17.             clStr ="style='color:"+sets.markColor+";'";
18.         }
19.        
20.         //对前一次高亮处理的文字还原
21.         $("span[rel='mark']").removeAttr("class").removeAttr("style").removeAttr("rel");
22.        
23.        
24.         //字符串正则表达式关键字转化
25.         $.regTrim =function(s){
26.             var imp =/[^.\|()*+-$[]?]/g;
27.             var imp_c ={};
28.             imp_c["^"]="\^";
29.             imp_c["."]="\.";
30.             imp_c["\"]="\\";
31.             imp_c["|"]="\|";
32.             imp_c["("]="\(";
33.             imp_c[")"]="\)";
34.             imp_c["*"]="\*";
35.             imp_c["+"]="\+";
36.             imp_c["-"]="\-";
37.             imp_c["$"]="$";
38.             imp_c["["]="\[";
39.             imp_c["]"]="\]";
40.             imp_c["?"]="\?";
41.             s = s.replace(imp,function(o){
42.                 return imp_c[o];                      
43.             });
44.             return s;
45.         };
46.         $(this).each(function(){
47.             var t = $(this);
48.             str = $.trim(str);
49.             if(str ===""){
50.                 alert("关键字为空");
51.                 returnfalse;
52.             }else{
53.                 //将关键字push到数组之中
54.                 var arr =[];
55.                 if(sets.divFlag){
56.                     arr = str.split(sets.divStr);  
57.                 }else{
58.                     arr.push(str);  
59.                 }
60.             }
61.             var v_html = t.html();
62.             //删除注释
63.             v_html = v_html.replace(/<!--(?:.*)-->/g,"");
64.            
65.             //将HTML代码支离为HTML片段和文字片段，其中文字片段用于正则替换处理，而HTML片段置之不理
66.             var tags =/[^<>]+|<(/?)([A-Za-z]+)([^<>]*)>/g;
67.             var a = v_html.match(tags), test =0;
68.             $.each(a,function(i, c){
69.                 if(!/<(?:.|s)*?>/.test(c)){//非标签
70.                     //开始执行替换
71.                     $.each(arr,function(index, con){
72.                         if(con ===""){return;}
73.                         var reg =newRegExp($.regTrim(con),"g");
74.                         if(reg.test(c)){
75.                             //正则替换
76.                             c = c.replace(reg,"♂"+con+"♀");
77.                             test =1;
78.                         }
79.                     });
80.                     c = c.replace(/♂/g,"<span rel='mark' "+clStr+">").replace(/♀/g,"</span>");
81.                     a[i]= c;
82.                 }
83.             });
84.             //将支离数组重新组成字符串
85.             var new_html = a.join("");
86.            
87.             $(this).html(new_html);
88.            
89.             if(test ===0&& sets.nullReport){
90.                 alert("没有搜索结果");    
91.                 returnfalse;
92.             }
93.            
94.             //执行回调函数
95.             sets.callback();
96.         });
97.     };
98. })(jQuery);

   

使用方法是textSearch，具体为：$(选择器). textSearch(String,可选参数)。例如，

1. $("body").textSearch("世界杯");

 

表示的含义就是查询并红色高亮标注body标签下的所有的“世界杯”这个关键字，也就是页面下高亮标注所有的“世界杯”文字。又如：

1. $(".test").textSearch("空姐 凤姐 芙蓉姐",{markColor:"blue"});

则表示class中有test样式的所有标签下的“空姐”，“凤姐”，“芙蓉姐”文字用蓝色高亮标注。

我使用的过程为：（需要同时引入下面两个js文件才能正常运行）

<script type="text/javascript" src="jquery-2.0.0.js"></script>
<script type="text/javascript" src="jquery.textSearch-1.0.js"></script>
<script type="text/javascript">
$(function(){
var v = $("#txtSearchKeyword").val();   //获取id为txtSearchKeyword的text值赋给v  也可以使用request传递的参数：var v = "<%=q1%>";
$("#searchTextTest").textSearch(v);     //将id为searchTextTest的文本中包含v的高亮显示
return false;
});

</script>

详细用法请参考：http://www.zhangxinxu.com/wordpress/?p=888