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

时间：2021-05-11 16:54:32

给你推荐通过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

相关文章