【原創】JavaScript高亮搜索關鍵字（改進版） [2009-1-6 16:25:00] by mwfls

11 我頂 .maks { line-height: 150%; padding: 10px; }.maks p { margin-bottom: 10px; text-indent: 2em; }.maks img { margin-bottom: 10px; margin-top: 10px; }.maks .imp { font-size: 14px; font-weight: bold; }

用戶通過搜索引擎搜索關鍵字進入你的網站或者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&client=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來判斷，雖然可以實現，但我覺得會比較繁瑣。所以我就從這里開始改了，改用正則表達式來判斷和提取關鍵字，代碼如下：

view plain print ?

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].match(/[^/+]+/g)):( null ))):( null )??

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].match(/[^/+]+/g)):(null))):(null)

url就是document.referrer的結果，arrdata就是通過正則加判斷篩選出來的關鍵字數組（還沒有反編碼的）。“正則”這個東西實在是太強大了，有空要再慢慢研究下，這還是我自己第一次寫的正則表達式，如果有那里寫的不妥當的話，請留言指點。

通過上面的表達式獲得關鍵字后，接下就是對關鍵字進行反編碼，可以通過JavaScript里的decodeURIComponent函數讓他還原為我們之前查找的關鍵字：Flash AS3 進度條 mak-s。(不明白URL編碼的可以看看這篇文章：[JavaScript URL編碼函數] )

代碼：

view plain print ?

var ?arrKey= new ?Array();??

?for ( var ?i=0;i<arrdata.length;i++){??

?arrKey[i]=decodeURIComponent(arrdata[i]);??

?}??

var arrKey=new Array(); for(var i=0;i<arrdata.length;i++){ arrKey[i]=decodeURIComponent(arrdata[i]); }

這樣，arrKey里的就是我們原始的搜索關鍵字了。到此，提取關鍵字的工作就ok了！

第二步：高亮顯示你內容里的關鍵字

網上實現這步的方法是通過對BODY下的children進行遍歷查找需要高亮的內容。但我認為這樣做不太科學，首先用戶需要查找的關鍵字一般就是在文章的內容中或者再文章列表中，像那些標題之類的，本來就已經很“高亮”了，不需要再次高亮。這樣我們就可以收縮要查找的范圍——文章內容及文章列表。

怎樣才能定位高亮的內容在正文和列表呢？通過ID和getElementById來決定。如我們定列表的所在的div的id為“Mlist”，然會用JavaScript里的document.getElementById(“Mlist”).innerHTML就可以輕易的獲得列表里的內容了。

但通過innerHTML獲的是網頁的源代碼，包括HTML標記，而要高亮的應該是網頁的內容,所以這里我又用正則表達式來判斷是否屬于html標記，然后通過replace+正則表達式進行高亮關鍵字的替換，方便快捷。

高亮關鍵字函數代碼：

view plain print ?

//obj:查找范圍ID ??

//keyword:關鍵字數組，即上面的arrdata ??

//Kstyle:高亮的樣式，即在style里的樣式字符，隨你自己喜歡 ??

function ?HighlightText(obj,keyword,Kstyle)??

{??

?if (Kstyle)??

?{??

??for ( var ?i=0;i<keyword.length;i++){??

??var ?reg?=? new ?RegExp(keyword[i]+ "(?=[^<>]*<)" , "ig" ); //根據關鍵字動態生成正則表達式 ??

??var ?data=document.getElementById(obj).innerHTML; //替換范圍獲取源代碼 ??

??document.getElementById(obj).innerHTML=data.replace(reg,'<span?style="' +Kstyle+ '">' +keyword[i]+ '</span>' ); //根據正則表達式替換 ??

??}??

?}??

}??

//obj: 查找范圍ID //keyword:關鍵字數組，即上面的arrdata //Kstyle:高亮的樣式，即在style里的樣式字符，隨你自己喜歡 function HighlightText(obj,keyword,Kstyle) { if(Kstyle) { for(var i=0;i<keyword.length;i++){ var reg = new RegExp(keyword[i]+"(?=[^<>]*<)","ig");//根據關鍵字動態生成正則表達式 var data=document.getElementById(obj).innerHTML;//替換范圍獲取源代碼 document.getElementById(obj).innerHTML=data.replace(reg,'<span style="'+Kstyle+'">'+keyword[i]+'</span>');//根據正則表達式替換 } } }

第三步：程序的使用及注意事項

通過上面的兩個步驟，大家應該明白這個程序的流程了吧。最后只要把這些程序加到window.onload事件中（記住是 window.onload不是body.onload,因為IF與FF的onload事件有點區別，所以用這個就兩個都兼容了，意思是當網頁加載完成后執行該程序）。

完整的程序代碼

view plain print ?

//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].match(/[^/+]+/g)):( null ))):( null )??

?Knum=(arrdata)?((Knum)?((Knum<arrdata.length)?(Knum):(arrdata.length)):(3)):(null );??

?if (!Knum) return ;??

?var ?arrKey= new ?Array();??

?for ( var ?i=0;i<Knum;i++){??

?arrKey[i]=decodeURIComponent(arrdata[i]);??

?}??

?return ?arrKey;???

?}??

//高亮關鍵字函數HighlightText ??

function ?HighlightText(obj,keyword,Kstyle)??

{??

?if (Kstyle)??

?{??

??for ( var ?i=0;i<keyword.length;i++){??

??var ?reg?=? new ?RegExp(keyword[i]+ "(?=[^<>]*<)" , "ig" );??

??var ?data=document.getElementById(obj).innerHTML;??

??document.getElementById(obj).innerHTML=data.replace(reg,'<span?style="' +Kstyle+ '">' +keyword[i]+ '</span>' );???

??}??

?}??

}??

//調用的主函數Highlightmain ??

function ?Highlightmain(){??

?if (!document.referrer) return ;??

?HighlightText('這里放你的查找范圍1' ,checkURL(document.referrer,5), "background-color:#0066CC;?color:#FFF" );??

HighlightText('這里放你的查找范圍2' ,checkURL(document.referrer,5), "你的高亮樣式" );??

?}??

window.οnlοad=function (){Highlightmain()}; //把主函數加入window.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].match(/[^/+]+/g)):(null))):(null) Knum=(arrdata)?((Knum)?((Knum<arrdata.length)?(Knum):(arrdata.length)):(3)):(null); if(!Knum)return; var arrKey=new Array(); for(var i=0;i<Knum;i++){ arrKey[i]=decodeURIComponent(arrdata[i]); } return arrKey; } //高亮關鍵字函數HighlightText function HighlightText(obj,keyword,Kstyle) { if(Kstyle) { for(var i=0;i<keyword.length;i++){ var reg = new RegExp(keyword[i]+"(?=[^<>]*<)","ig"); var data=document.getElementById(obj).innerHTML; document.getElementById(obj).innerHTML=data.replace(reg,'<span style="'+Kstyle+'">'+keyword[i]+'</span>'); } } } //調用的主函數Highlightmain function Highlightmain(){ if(!document.referrer)return; HighlightText('這里放你的查找范圍1',checkURL(document.referrer,5),"background- color:#0066CC; color:#FFF"); HighlightText('這里放你的查找范圍2',checkURL(document.referrer,5),"你的高亮樣式"); } window.οnlοad=function(){Highlightmain()};//把主函數加入window.onload事件中

在完整代碼里我加多了一個功能就是你需要高亮的關鍵字個數，不填Knum這個變量時我設默認是三個，因為我的統計數據里一般用戶輸入的關鍵字都是在兩到四個左右。而且我都不建議將這段代碼放在首頁[MakStudio] 或者一些頁面內容不是太豐富的頁面[高智商游戲【數獨】] ，因為高亮關鍵詞怎樣說都會對網頁的設計風格有所影響。使用時，你只需要將這段代碼稍作修改放到的你的網頁或文章源代碼的底部就可以。

最后顯示效果：

使用注意事項：

1.該程序在IE7-5.5、FF下測試通過，未在其他瀏覽器下進行測試，有條件的朋友可以幫忙進行測試，有問題的話請給我留言。

2.盡量不要在查找范圍內放置<STYLE type=text/css>XXXX</STYLE>等css或腳本代碼，否則其中XXXX的代碼可能會被但作內容進行替換，結果將會導致你的頁面面目全非。

3.該程序只針對google及雅虎的搜索關鍵字進行判斷，因為百度的url編碼與前兩個不同，暫時未做出符合該編碼的解碼方法。如果你有更好的方法可以給我留言。

4.以上是暫時作者發現的問題，如果你在使用中出現更多的問題，給我留言，我盡力幫手解決。

5.該程序純屬個人興趣制作，有需要的朋友可以自行修改完善或者留言交流。

該程序擴展功能idea(有興趣的朋友可以嘗試制作)

1.根據搜索關鍵字生成動態關鍵字導航。

2.根據不同的關鍵字使用不同的高亮樣式，仿搜索引擎的網頁快照。

3.提取關鍵字的功能加強，進行中英文分詞功能。

轉載于:https://www.cnblogs.com/y0umer/archive/2010/11/16/3839387.html

總結

以上是生活随笔為你收集整理的js+正文规则 高亮搜索关键字（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。