首頁 > 開發者 > JavaScript
將搜尋索引鍵設定為高亮顯示執行個體代碼，關鍵字高亮顯示
將搜尋索引鍵設定為高亮顯示執行個體代碼:
搜尋關鍵詞以高亮狀態呈現是一種比較人性化的舉措，例如百度或者本站都有這樣的功能，可以極大的提高辨識度，下面就通過代碼執行個體介紹一下如何?此功能。
代碼執行個體如下:
<!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>
以上代碼實現了我們的要求，可以將指定的關鍵字在字串中以高亮的形式展現，下面簡單介紹一下實現過程。
一.實現原理:
原理很簡單，以上代碼的最終目的就是實現用Regex匹配每一個關鍵字，然後用指定的字串替換匹配的關鍵字，然後利用CSS給其高亮或者加粗即可，原理大致如此，可以參閱相關閱讀，或者跟帖留言。
二.相關閱讀:
1.split()函數可以參閱javascript的String對象的split()方法一章節。
2.RegExp()建構函式可以參閱Regex的建立一章節。
3.replace()函數可以參閱Regexreplace()函數一章節。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=10500
更多內容可以參閱:http://www.softwhy.com/javascript/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
