页面检索查询功能

<!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>
页面检索查询功能

猜你喜欢
