如何通过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. $("span[rel='mark']").removeAttr("class").removeAttr("style").removeAttr("rel");
21. //字符串正则表达式关键字转化
22. $.regTrim =function(s){
23. var imp =/[\^\.\\\|\(\)\*\+\-\$\[\]\?]/g;
24. var imp_c ={};
25. imp_c["^"]="\\^";
26. imp_c["."]="\\.";
27. 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. s = s.replace(imp,function(o){
39. return imp_c[o];
40. });
41. return s;
42. };
43. $(this).each(function(){
44. var t = $(this);
45. str = $.trim(str);
46. if(str ===""){
47. alert("关键字为空");
48. returnfalse;
49. }else{
50. //将关键字push到数组之中
51. var arr =[];
52. if(sets.divFlag){
53. arr = str.split(sets.divStr);
54. }else{
55. arr.push(str);
56. }
57. }
58. var v_html = t.html();
59. //删除注释
60. v_html = v_html.replace(/<!--(?:.*)\-->/g,"");
61. //将HTML代码支离为HTML片段和文字片段，其中文字片段用于正则替换处理，而HTML片段置之不理
62. var tags =/[^<>]+|<(\/?)([A-Za-z]+)([^<>]*)>/g;
63. var a = v_html.match(tags), test =0;
64. $.each(a,function(i, c){
65. if(!/<(?:.|\s)*?>/.test(c)){//非标签
66. //开始执行替换
67. $.each(arr,function(index, con){
68. if(con ===""){return;}
69. var reg =newRegExp($.regTrim(con),"g");
70. if(reg.test(c)){
71. //正则替换
72. c = c.replace(reg,"♂"+con+"♀");
73. test =1;
74. }
75. });
76. c = c.replace(/♂/g,"<span rel='mark' "+clStr+">").replace(/♀/g,"</span>");
77. a[i]= c;
78. }
79. });
80. //将支离数组重新组成字符串
81. var new_html = a.join("");
82. $(this).html(new_html);
83. if(test ===0&& sets.nullReport){
84. alert("没有搜索结果");
85. returnfalse;
86. }
87. //执行回调函数
88. sets.callback();
89. });
90. };
91. })(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