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

Js实现页面关键字高亮显示的更多相关文章

  1. 原生Js 两种方法实现页面关键字高亮显示

    原生Js 两种方法实现页面关键字高亮显示 上网看了看别人写的,不是兼容问题就是代码繁琐,自己琢磨了一下用两种方法都可以实现,各有利弊. 方法一 依靠正则表达式修改 1.获取obj的html2.统一替换 ...

  2. JS将搜索的关键字高亮显示实现代码

    这篇文章介绍了JS将搜索的关键字高亮显示实现代码,有需要的朋友可以参考一下 用JS让文章内容指定的关键字加亮 是这样的.. 现在有这些关键字:美容,生活,购物 当在文章里头出现这些关键字,就把它加亮显 ...

  3. js中页面刷新和页面跳转的方法总结

    .js中cookie的基本用法简介 2009-12-15 js中页面刷新和页面跳转的方法总结 文章分类:Web前端 关键字: javascript js中页面刷新和页面跳转的方法总结 1.histor ...

  4. js中页面刷新和页面跳转的方法总结 [ 转自欢醉同学 ]

    .js中cookie的基本用法简介 2009-12-15 js中页面刷新和页面跳转的方法总结 文章分类:Web前端 关键字: javascript js中页面刷新和页面跳转的方法总结 1.histor ...

  5. 前端（十二）—— JavaScript基础操作：if语句、for循环、while循环、for...in、for...of、异常处理、函数、事件、JS选择器、JS操作页面样式

    JavaScript基础操作 一.分支结构 1.if语句 if 基础语法 if (条件表达式) { 代码块; } // 当条件表达式结果为true,会执行代码块:反之不执行 // 条件表达式可以为普通 ...

  6. JS实现页面进入、返回定位到具体位置

    最为一个刚入职不久的小白...慢慢磨练吧... JS实现页面返回定位到具体位置 其实浏览器也自带了返回的功能,也就是说,自带了返回定位的功能.正常的跳转,返回确实可以定位,但是有些特殊场景就不适用了. ...

  7. js中this关键字测试集锦

    参考:阮一峰<javascript的this用法>及<JS中this关键字详解> this是Javascript语言的一个关键字它代表函数运行时,自动生成的一个内部对象,只能在 ...

  8. js jquery 页面加载初始化方法

    js jquery 页面加载初始化方法 一.js页面加载初始化方法 // 1.在body里面写初始化方法. <body onload='init()'> </body> < ...

  9. JS中this关键字详解

    本文主要解释在JS里面this关键字的指向问题(在浏览器环境下). 阅读此文章,还需要心平气和的阅读完,相信一定会有所收获,我也会不定期的发布,分享一些文章,共同学习 首先,必须搞清楚在JS里面,函数 ...

随机推荐

  1. v-bind绑定属性样式——class的三种绑定方式

    1.布尔值的绑定方式 <div id="demo"> <span v-bind:class="{‘class-a‘:isA ,‘class-b‘:isB ...

  2. 【python】中文提取，判断，分词

    参考: http://www.cnblogs.com/kaituorensheng/p/3595879.html https://github.com/fxsjy/jieba 判断是否包含中文 def ...

  3. linux 下 eclipse 安装

    下载: 官网选择相应安装包下载,我这里下了tar.gz包 安装: tar xzvf eclipse-inst-linux64.tar.gz 设置环境变量 export JAVA_HOME=/usr/l ...

  4. Laravel collection 报错 join(): Invalid arguments passed

    混淆了 array 与 collection,join 并不支持 collection. array 与 collection 不同的 join 实现 collect([1, 2, 3, 4, 5]) ...

  5. NBUT1457

    不知道哪里的oj..做了交不上去.. 也是莫队的模板题 #include<iostream> #include<cstring> #include<cstdio> ...

  6. 性能测试十二：jmeter进阶之java请求参数化

    如项目中的ip.端口号之类的,都可以在此代码中定义 public Arguments getDefaultParameters() { // TODO Auto-generated method st ...

  7. 用switch语句判断月份，打印出当前月份所在的季节

    var today=new Date(); var abc=today.getMonth(); switch (abc) { case 0: case 1: case 2: document.writ ...

  8. Codeforces 1114F Please, another Queries on Array? 线段树

    Please, another Queries on Array? 利用欧拉函数的计算方法, 用线段树搞一搞就好啦. #include<bits/stdc++.h> #define LL ...

  9. 诡异的楼梯 HDU1180

    这题做了很久 做好了感觉很简单... 现在做题思路更加清晰了 一个要点就是   当楼梯过不去的时候不能是先过去时间加2  必须得回去等一秒   否则queue的时间顺序会被打破 #include< ...

  10. P2399 non hates math

    P2399 non hates math将分数化成小数的模拟题,把循环减掉就可以了.1.1(234)*10^4==11234.234*10^1==11.2349999*(1.1(234))==1122 ...