<!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. PHP实现中文字符串截取无乱码

    在我们学习PHP知识的过程中,PHP截取字符串应该是一个非常常见的字符串基础操作了,想必大家都比较熟悉这方面知识点. 但是有些新手朋友们可能遇到过,当截取中英文字符串时出现乱码的情况,其实这个也是非常 ...

  2. python 全栈开发，Day127(app端内容播放,web端的玩具,app通过websocket远程遥控玩具播放内容,玩具管理页面)

    昨日内容回顾 1. 小爬爬 内容采集 XMLY 的 儿童频道 requests 2. 登陆 注册 自动登陆 退出 mui.post("请求地址",{数据},function(){} ...

  3. python 全栈开发，Day32(知识回顾,网络编程基础)

    一.知识回顾 正则模块 正则表达式 元字符 : . 匹配除了回车以外的所有字符 \w 数字字母下划线 \d 数字 \n \s \t 回车 空格 和 tab ^ 必须出现在一个正则表达式的最开始,匹配开 ...

  4. 安装httpd过程，将网站部署到httpd过程

    1,配置DNSvi /etc/resolv.conf 加入以下代码 nameserver 192.168.0.1 nameserver 8.8.8.8 nameserver 8.8.4.4 2.输入y ...

  5. 关于C#资源文件的相关操作

    关于资源文件的相关操作. //1.比较常见的有获取资源文件对应的文件流,然后转换到相对应的文件 //比较典型的做法是通过代码程序集加载指定资源 //如下通过Assembly的静态方法GetExecut ...

  6. Mysql mysqld_safe启动与myslqd启动坑

    一.用mysqld_safe启动时候无法看到报错信息. 二.用mysqld启动时候可以看到日志实时打印.

  7. BZOJ1209 [HNOI2004]最佳包裹 三维凸包 计算几何

    欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ1209 题目概括 给出立体的n个点.求三维凸包面积. 题解 增量法,看了一天,还是没有完全懂. 上板 ...

  8. class path resource [spring/applicationContext.xml] cannot be opened because it does not exist

    1.查看路径有没有写错 2.编辑器认为你的文件不是 source folders(原文件),需要你手动将文件改过来

  9. 如何安装破解Unity, 以5.6.1为例

    1.Unity官方网址:http://unity3d.com  系统会根据网址IP,自动转到中国区,网址变为:http://unity3d.com/cn/ 点击“获取Unity” 2.选择Person ...

  10. TNS:listener does not currently know of service requested in connect descriptor错误改正

    (SID_LIST = (SID_DESC =  (SID_NAME = PLSExtProc)  (ORACLE_HOME = E:\oracle\product\10.2.0\db_1)  (PR ...