Java Sql JavaScript实现搜索关键词高亮显示

  • A+
所属分类:Web前端

【Java Sql JavaScript实现搜索关键词高亮显示】

Java Sql JavaScript实现搜索关键词高亮显示

效果如上图,搜索“红酒”,相应搜索结果中的关键词就会高亮显示。
实现方法:
方法一、利用Java在服务器端进行处理

  1. String newName="<font color='red' style='background-color:yellow;'>"+name+"</font >";   
  2.    String code=username.replace(name,newName );   
  3.    request.setAttribute("code", code);  

1,username是原始包含关键词的文本
2.name是关键词文本
3.newName 是替换后的文本
3.code是替换后所有文本字符串
4.关于replace(..)方法
public String replace(char oldChar,
char newChar)
返回一个新的字符串,它是通过用 newChar 替换此字符串中出现的所有 oldChar 而生成的。
更相信的介绍可以查阅帮助文档它是String类的方法。
5.最后把code保存到session或者request中,在页面取出。
当然这只能保存1个值,也可以循环获得code然后把它放到一个集合中,再放到作用域中。
这种方法的优点在于代码简洁,速度快。但如果替换的文字过多会给服务器带来压力。
方法二、在sql中执行替换函数
replace(...)具体方法请查阅帮助文档
此方式简单,但是貌似数据库的原始数据也被更改了。
方法三、 使用javascript,在页面加载完毕后执行替换
此方法最为麻烦,如果加载的页面很大,其速度会很慢。而且代码量也大。
但是它减轻了服务器的负担。
代码如下:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">   
  2. <html xmlns="http://www.w3.org/1999/xhtml">   
  3. <head>   
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />   
  5. <META name="Author" content="heyongchao.com" />   
  6. <script type="text/javascript">   
  7. function encode(s){   
  8.   return s.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/([\\\.\*\[\]\(\)\$\^])/g,"\\$1");   
  9. }   
  10. function decode(s){   
  11.   return s.replace(/\\([\\\.\*\[\]\(\)\$\^])/g,"$1").replace(/>/g,">").replace(/</g,"<").replace(/&/g,"&");   
  12. }   
  13. function highlight(s){   
  14.   if (s.length==0){   
  15.     alert('搜索关键词未填写!');   
  16.     return false;   
  17.   }   
  18.   s=encode(s);   
  19.   var obj=document.getElementsByTagName("body")[0];   
  20.   var t=obj.innerHTML.replace(/<span\s+class=.?highlight.?>([^<>]*)<\/span>/gi,"$1");   
  21.   obj.innerHTML=t;   
  22.   var cnt=loopSearch(s,obj);   
  23.   t=obj.innerHTML   
  24.   var r=/{searchHL}(({(?!\/searchHL})|[^{])*){\/searchHL}/g   
  25.   t=t.replace(r,"<span class='highlight'>$1</span>");   
  26.   obj.innerHTML=t;   
  27.   alert("搜索到关键词"+cnt+"处")   
  28. }   
  29. function loopSearch(s,obj){   
  30.   var cnt=0;   
  31.   if (obj.nodeType==3){   
  32.     cnt=replace(s,obj);   
  33.     return cnt;   
  34.   }   
  35.   for (var i=0,c;c=obj.childNodes[i];i++){   
  36.     if (!c.className||c.className!="highlight")   
  37.       cnt+=loopSearch(s,c);   
  38.   }   
  39.   return cnt;   
  40. }   
  41. function replace(s,dest){   
  42.   var r=new RegExp(s,"g");   
  43.   var tm=null;   
  44.   var t=dest.nodeValue;   
  45.   var cnt=0;   
  46.   if (tm=t.match(r)){   
  47.     cnt=tm.length;   
  48.     t=t.replace(r,"{searchHL}"+decode(s)+"{/searchHL}")   
  49.     dest.nodeValue=t;   
  50.   }   
  51.   return cnt;   
  52. }   
  53. </script>   
  54. <style type="text/css">   
  55. .highlight{background:green;font-weight:bold;color:white;}   
  56. </style>   
  57. </head>   
  58. <body>   
  59. <form onsubmit="highlight(this.s.value);return false;">   
  60. <p><input name="s" id="s" title="搜索内容:"/><input type="submit" value="搜索"/></p>   
  61. </form>   
  62. <div id="content">   
  63. 第一次在外面过年的N条心得<br />   
  64. <br />   
  65. 总结:<br />   
  66.   
  67. 1、在外面过年要记得给家里人打个电话问候下。<br />   
  68.   
  69. 2、没能和老婆在一块儿一定要煲一下电话粥,再加上一些新年的祝福!<br />   
  70.   
  71. 3、一个人的时候要善待自己,自己照顾好自己,这样才有本钱来爱别人和被人爱。<br />   
  72.   
  73. 4、要在如此难得的一个人的时候想清楚新的一年里需要做些什么,要有目标,有计划。<br />   
  74.   
  75. 5、思念一个人久了往往会促成某些冲动,但要记住一句话"对待爱情一定要感性,对待生活一定要理性"。<br />   
  76.   
  77. 6、人穷志不穷,要记得"天将降大任于是人也,必先苦其心志,劳其筋骨,饿其体肤,空乏其身,行拂乱其所为,所以动心忍性,曾益其所不能。"。<br />   
  78.   
  79. 7、时刻不忘学习,其实你在做任何事情的时候都会有所得,只要你用心体会。<br />   
  80.   
  81. 8、要多喝水,养颜,还可以喝个半饱,省粮食~~~<br />   
  82.   
  83. 9、一个人的时候不能喝酒,否则会应了那句话"借酒浇愁愁更愁"。<br />   
  84.   
  85. 10、闲下来的时候就干点无聊的事,但不去做不经过大脑的事。<br />   
  86.   
  87. </div>   
  88. </body>   
  89. </html>  
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: