js+正文规则 高亮搜索关键字(二)

js+正文规则 高亮搜索关键字(二)
2010年11月16日
　　11 我顶
　　用户通过搜索引擎搜索关键字进入你的网站或者BLOG的时候，如果你的文章太长，就好像我收录的这篇文章[JS、Css在IE和FireFox中的不同表现] ,基本上在1280*1024分辨率下，鼠标滚轮都要滚3次才能看到尾，这样十分不方便用户查找自己想要的内容。
　　为了提升用户体现，最好的办法就在的文章中高亮显示那些是用户想查找的内容。
　　下面就开始一步一步说说怎样实现这种功能（怎样实现的想法还是比较简单的，但真正用JavaScript做出来就做了我一天了，网上都有这种功能实现的教材文章，但我觉得还有改进的空间，所以想法是差不多，但改变实现的方法。） 第一步：提取用户所搜索的关键字 一般用户通过搜索引擎搜索关键字时，所搜索的关键字会通过URL编码传送，最后显示在地址栏，如搜索：Flash AS3 进度条 mak-s
　　Google显示结果：http://www.google.cn/search?hl=zh-CN&newwindow=1&c lient=aff-os-maxthon&hs=uGn&q=Flash+AS3+%E8%BF%9B%E5%BA%A6%E6%9D%A1+mak-s &meta=&aq=f&oq= 
　　
　　雅虎显示结果：http://one.cn.yahoo.com/s?p=Flash+AS3+%E8%BF%9B%E5%BA%A6%E6%9D%A1+mak-s &v=web&pid=hp 百度显示结果：http://www.baidu.com/s?wd=Flash+AS3+%BD%F8%B6%C8%CC%F5+mak-s
　　注意看红色的那部分代码就是经过URL编码后的关键字，各个关键字用"+"相连，英文数字及一些字符不变，中文变成"%XX"的形式。红色的部分就是你稍后要用到的内容。
　　然后用户通过搜索的页面进入你的网站、Blog，浏览器会记录用户从那个页面进入你的网站，你可以通过JavaScript的document.referrer函数调用这个页面地址（如果用户是直接输入进你的网站，该值为空）。
　　得到地址了，接下来就是从地址里提取用户搜索的关键字，这步网上比较多的是使用indexOf来判断，虽然可以实现，但我觉得会比较繁琐。所以我就从这里开始改了，改用正则表达式来判断和提取关键字，代码如下： url就是document.referrer的结果，arrdata就是通过正则加判断筛选出来的关键字数组（还没有反编码的）。"正则"这个东西实在是太强大了，有空要再慢慢研究下，这还是我自己第一次写的正则表达式，如果有那里写的不妥当的话，请留言指点。
　　通过上面的表达式获得关键字后，接下就是对关键字进行反编码，可以通过JavaScript里的decodeURIComponent函数让他还原为我们之前查找的关键字：Flash AS3 进度条 mak-s。(不明白URL编码的可以看看这篇文章：[JavaScript URL编码函数] )
　　代码： 这样，arrKey里的就是我们原始的搜索关键字了。到此，提取关键字的工作就ok了！ 第二步：高亮显示你内容里的关键字 网上实现这步的方法是通过对BODY下的children进行遍历查找需要高亮的内容。但我认为这样做不太科学，首先用户需要查找的关键字一般就是 在文章的内容中或者再文章列表中，像那些标题之类的，本来就已经很"高亮"了，不需要再次高亮。这样我们就可以收缩要查找的范围--文章内容及文章列表。
　　怎样才能定位高亮的内容在正文和列表呢？通过ID和getElementById来决定。如我们定列表的所在的div的id为"Mlist"，然会 用JavaScript里的document.getElementById("Mlist").innerHTML就可以轻易的获得列表里的内容了。
　　但通过innerHTML获的是网页的源代码，包括HTML标记，而要高亮的应该是网页的内容,所以这里我又用正则表达式来判断是否属于html标记，然后通过replace+正则表达式进行高亮关键字的替换，方便快捷。
　　高亮关键字函数代码： //obj:查找范围ID  
　　//keyword:关键字数组，即上面的arrdata  
　　//Kstyle:高亮的样式，即在style里的样式字符，随你自己喜欢  
　　function HighlightText(obj,keyword,Kstyle)  
　　{  
　　if(Kstyle)  
　　{  
　　for(var i=0;i]*正则表达式  
　　var data=document.getElementById(obj).innerHTML;//替换范围获取源代码  
　　document.getElementById(obj).innerHTML=data.replac e(reg,''+keyword[i]+'');//根据正则表达式替换  
　　}    }   }  
　　//obj: 查找范围ID //keyword:关键字数组，即上面的arrdata //Kstyle:高亮的样式，即在style里的样式字符，随你自己喜欢 function HighlightText(obj,keyword,Kstyle) { if(Kstyle) { for(var i=0;i]*正则表达式 var data=document.getElementById(obj).innerHTML;//替换范围获取源代码 document.getElementById(obj).innerHTML=data.replac e(reg,''+keyword[i]+'');//根据正则表达式替换 } } } 
　　第三步：程序的使用及注意事项 通过上面的两个步骤，大家应该明白这个程序的流程了吧。最后只要把这些程序加到window.onload事件中（记住是 window.onload不是body.onload,因为IF与FF的onload事件有点区别，所以用这个就两个都兼容了，意思是当网页加载完成后 执行该程序）。
　　完整的程序代码 //url:document.referrer返回的网页地址;  
　　//Kunm:需要高亮的关键字个数  
　　//提取关键字函数checkURL  
　　function checkURL(url,Knum){  
　　var reHost = /[\w]+:\/\/[\w\.]+\//;   
　　var arrdata=(reHost.test(url))?((url.match(reHost)[0]. indexOf("yahoo")>0)?(url.match(/[&\?]p=[\w+%]+/)[0].split(/=/)[1]. match(/[^\+]+/g)):((url.match(reHost)[0].indexOf("google")>0)?(url.match(/&q=[\w+%]+/)[0].split(/=/)[1].matc h(/[^\+]+/g)):(null))):(null)  
　　Knum=(arrdata)?((Knum)?((Knum]*'+keyword[i]+'');   
　　}    }   }  
　　//调用的主函数Highlightmain  
　　function Highlightmain(){  
　　if(!document.referrer)return;  
　　HighlightText('这里放你的查找范围1',checkURL(document.referrer,5),"background-color:#0066CC; color:#FFF");  
　　HighlightText('这里放你的查找范围2',checkURL(document.referrer,5),"你的高亮样式");