<!DOCTYPE HTML> <html lang="en"> <meta http-equiv="Content-Type" content="text/html; charset=gdk" /> <head> <title>檢索關鍵字</title> <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> </head> <body> <div style="width:100%; height:100px"> <input id="key" type="text"/><input type="button" value="檢索" onclick="search()"/> </div> <div id="result"> 說散就散 - 劉旭陽<br/> 詞：張楚翹<br/> 曲：伍樂城<br/> 抱一抱就當作從沒有在一起 好不好要解釋都已經來不及<br/> 算了吧我付出過什么沒關系 我忽略自己就因為遇見你<br/> 沒辦法好可怕那個我不像話 一直奮不顧身是我太傻<br/> 說不上愛別說謊就一點喜歡 說不上恨別糾纏別裝作感嘆<br/> 就當作我太麻煩不停讓自己受傷 我告訴我自己感情就是這樣<br/> 怎么一不小心太瘋狂 抱一抱再好好覺悟不能長久<br/> 好不好有虧欠我們都別追究 算了吧我付出再多都不足夠<br/> 我終於得救我不想再獻丑 沒辦法不好嗎大家都不留下<br/> 一直勉強相處總會累垮 說不上愛別說謊就一點喜歡<br/> 說不上恨別糾纏別裝作感嘆 就當作我太麻煩不停讓自己受傷<br/> 我告訴我自己感情就是這樣 怎么一不小心太瘋狂<br/> 別后悔就算錯過 在以后你少不免想起我<br/> 還算不錯 當我不在你會不會難過<br/> 你夠不夠我這樣灑脫 說不上愛別說謊就一點喜歡<br/> 說不上恨別糾纏別裝作感嘆 將一切都體諒將一切都原諒<br/> 我嘗試找答案而答案很簡單 簡單得很遺憾<br/> 因為成長我們逼不得已要習慣 因為成長我們忽爾間說散就散<br/> </div> <script> function keyLight(id, key, bgColor){ var oDiv = document.getElementById(id), sText = oDiv.innerHTML, bgColor = bgColor || "orange", sKey = "<span name='addSpan' style='background-color: "+bgColor+";'>"+key+"</span>", num = -1, rStr = new RegExp(key, "g"), rHtml = new RegExp("\<.*?\>","ig"), //匹配html元素 aHtml = sText.match(rHtml); //存放html元素的數組 sText = sText.replace(rHtml, '{~}'); //替換html標簽 sText = sText.replace(rStr,sKey); //替換key sText = sText.replace(/{~}/g,function(){ //恢復html標簽 num++; return aHtml[num]; }); oDiv.innerHTML = sText; } function search(){ if(typeof($("span[name='addSpan']").get(0)) != 'undefined'){ var html = $("span[name='addSpan']").get(0).textContent; $("span[name='addSpan']").before(html); $("span[name='addSpan']").remove(); } //location.reload(); var key = document.getElementById("key").value; if($.trim(key) != null && $.trim(key) != ''){ keyLight('result', key); } } </script> </body> </html>