<!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. Laravel Form 表单的数据校验

    例如,要使用手机号加验证码的方式提供登录网站的功能,那么在处理前端提交的 form 表单时,就不得不对提交的手机号及验证码做基本的数据校验. 手写规则,非常浪费时间.使用 laravel 内置的 va ...

  2. php反射类的使用及Laravel对反射的使用介绍

    PHP的反射类与实例化对象作用相反,实例化是调用封装类中的方法.成员,而反射类则是拆封类中的所有方法.成员变量,并包括私有方法等.就如“解刨”一样,我们可以调用任何关键字修饰的方法.成员.当然在正常业 ...

  3. java根据word模板导出word文件

    1.word模板文件处理,如下图所示在word 文档中填值的地方写入占位变量 2.将word文档另存为xml文件.编辑如下图,找到填写的占位,修改为${bcrxm}格式 3.将文件后缀名改为.ftl文 ...

  4. SqlServer索引碎片

    1.产生碎片的操作 通过sys.dm_index_physical_stats来查看,索引上的页不在具有连续性时就会产生碎片,碎片是索引上页拆分的物理结果. (1).插入操作: INSERT操作在聚集 ...

  5. Ext.Js核心函数( 三)

    ExtJs 核心函数简介 1.ExtJs提供的常用函数2.get.fly.getCmp.getDom.getBody.getDoc3.query函数和select函数4.encode函数和decode ...

  6. MVC4 下DropDownList使用方法（转）

    与MVC3相比,差别很大: 表现形式一: public ActionResult Main() { List<SelectListItem> items = new List<Sel ...

  7. Android各国语言对照表(values-xxx)

    eg: 阿拉伯 Arabic  SA values-ar Android各国语言对照表https://blog.csdn.net/jiangguohu1/article/details/5044014 ...

  8. hdu 1575 求一个矩阵的k次幂 再求迹 （矩阵快速幂模板题）

    Problem DescriptionA为一个方阵,则Tr A表示A的迹(就是主对角线上各项的和),现要求Tr(A^k)%9973. Input数据的第一行是一个T,表示有T组数据.每组数据的第一行有 ...

  9. Codeforces 449C Jzzhu and Apples 贪心 (看题解）

    Jzzhu and Apples 从大的质因子开始贪心, 如果有偶数个则直接组合, 如果是奇数个留下那个质数的两倍, 其余两两组合. #include<bits/stdc++.h> #de ...

  10. POJ2115 C Looooops 扩展欧几里德

    欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - POJ2115 题意 对于C的for(i=A ; i!=B ;i +=C)循环语句,问在k位存储系统中循环几次 ...