<!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="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>