<!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. 深度学习Bible学习笔记：第六章 深度前馈网络

    第四章 数值计算(numerical calculation)和第五章 机器学习基础下去自己看. 一.深度前馈网络(Deep Feedfarward Network,DFN)概要: DFN:深度前馈网 ...

  2. wpf 用户自定义事件传参2

    public delegate void MenuButtonClickEventHandler(object sender, EventArgs e); public event MenuButto ...

  3. java tomcat linux 环境变量设置

    一https://www.cnblogs.com/hanshuai/p/9604730.html :whereis java //查找java 安装路径:which java //查找java 执行路 ...

  4. php中静态方法和静态属性的介绍

    静态分为两个部分:静态属性和静态方法 静态的东西都是给类用的(包括类常量),非静态的都是给对象用的 静态属性 在定义属性的时候,使用关键字static修饰的属性称之为静态属性. 静态方法 使用stat ...

  5. Python 3 官方文档学习(1)

    本文系官方文档翻译之作,不当之处,敬请原谅! range()函数 如果需要遍历一个数字序列,可以使用内置的range函数.该函数会生成等差序列. 1 2 3 range(5)# 范围[0, 5) ra ...

  6. 使用css3美化复选框

    声明:文章为转载(略改动),点击查看原文.如有侵权24小时内删除,联系QQ:1522025433. 我们知道HTML默认的复选框样式十分简陋,而以图片代替复选框的美化方式会给页面表单的处理带来麻烦,那 ...

  7. boto3--通过Python的SDK连接aws

    通过Python的SDK连接aws 参考: https://aws.amazon.com/cn/developers/getting-started/python/ aws上生成访问密钥 ID 和私有 ...

  8. [转] Anaconda使用总结

    机器上的不同用户完全可以安装.配置自己的Anaconda,不会互相影响. 对于Mac.Linux系统,Anaconda安装好后,实际上就是在主目录下多了个文件夹(~/anaconda)而已,Windo ...

  9. Delphi---TServerSocket和TClientSocket发送和接收大数据包

    https://www.cnblogs.com/zhangzhifeng/p/6065244.html TServerSocket和TClientSocket用非阻塞模式发送和接收比较大的数据时,可能 ...

  10. Python subprocess方法

    import subprocess #subprocess.call("df -h",shell=True,stdout=subprocess.PIPE)#打印到视图,但是不能保存 ...