將搜索關鍵字設置為高亮顯示實例代碼:搜索關鍵詞以高亮狀態呈現是一種比較人性化的舉措，例如百度或者本站都有這樣的功能，可以極大的提高辨識度，下麵就通過代碼實例介紹一下如何實現此功能。代碼實例如下:螞蟻部落 螞蟻部落歡迎您，只有努力非都才會有美好的未來，螞蟻部落位於青島市南區 以上代碼實現了我們的...
將搜索關鍵字設置為高亮顯示實例代碼:
搜索關鍵詞以高亮狀態呈現是一種比較人性化的舉措，例如百度或者本站都有這樣的功能，可以極大的提高辨識度，下麵就通過代碼實例介紹一下如何實現此功能。
代碼實例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> strong{color:red} </style> <script type="text/javascript"> function createExp(arry) { var str=""; for(var i=0;i<arry.length;i++) { if(i!=arry.length-1) { str=str+arry[i]+"|"; } else { str=str+arry[i]; } } return "("+str+")"; } function hightKey(key,id) { var arr=null; var regStr=null; var content=null; var Reg=null; var newContent=null; var theObj=document.getElementById(id); arr=key.split(/\s+/); regStr=createExp(arr); content=theObj.innerHTML; Reg=new RegExp(regStr,"g"); return newContent=content.replace(Reg,"<strong>$1</strong>"); } window.onload=function() { var thediv=document.getElementById("thediv"); var key="螞蟻部落 青島"; thediv.innerHTML=hightKey(key,"thediv"); } </script> </head> <body> <div id="thediv">螞蟻部落歡迎您，只有努力非都才會有美好的未來，螞蟻部落位於青島市南區</div> </body> </html>
以上代碼實現了我們的要求，可以將指定的關鍵字在字元串中以高亮的形式展現，下麵簡單介紹一下實現過程。
一.實現原理:
原理很簡單，以上代碼的最終目的就是實現用正則表達式匹配每一個關鍵字，然後用指定的字元串替換匹配的關鍵字，然後利用CSS給其高亮或者加粗即可，原理大致如此，可以參閱相關閱讀，或者跟帖留言。
二.相關閱讀:
1.split()函數可以參閱javascript的String對象的split()方法一章節。
2.RegExp()構造函數可以參閱正則表達式的創建一章節。
3.replace()函數可以參閱正則表達式replace()函數一章節。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=10500
更多內容可以參閱:http://www.softwhy.com/javascript/
