<!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. poj 3734 方块涂色 求红色 绿色方块都为偶数的方案数 （矩阵快速幂）

    N个方块排成一列 用红,蓝,绿,黄4种颜色去涂色,求红色方块 和绿色方块个数同时为偶数的 方案数 对10007取余 Sample Input 212Sample Output 2//(蓝,黄)6//( ...

  2. Ubuntu 安装 OpenMPI

    1. 下载OpenMPI 在官网上下载最新版本的安装包,如:openmpi-1.8.4.tar.gz 2. 解压并进行配置 tar -zxvf openmpi-3.0.0.tar.gz cd open ...

  3. Codeforces 891C Envy

    Envy 感觉这种最小生成树上的啥题都差不多的解法.. #include<bits/stdc++.h> #define LL long long #define fi first #def ...

  4. GitHub安装教程

    第一步是安装两个软件 安装 git for windows这个是一个git的windows系统的命令行版本https://git-scm.com/downloads或者https://pan.baid ...

  5. Ubuntu 下常用快捷键

    参考链接:Ubuntu终端以及应用下快捷键大全https://linux.cn/article-3025-1.html 桌面常用快捷键 Alt + F1:聚焦到桌面左侧任务导航栏,可按上下键进行导航 ...

  6. laravel 控制器使用MODEL

    第一步:引入MODEL类 use App\Http\Models\Sysdba; 第二步:使用 $uid = $request->input('uid'); 方法1. $model = new ...

  7. Openvas安装

    Openvas简介 Openvas是开源的,是Nessus项目分支,用于管理目标系统的漏洞,检测目标网络或主机的安全性.它的评估能力来源于数万个漏洞测试程序,openvas 早起版本还有一个客户端,现 ...

  8. 【值得收藏】一份非常完整的Mysql规范

    做一个积极的人 编码.改bug.提升自己 我有一个乐园,面向编程,春暖花开! 本文从芋道源码转载,在原有内容基础上结合阿里巴巴Java开发手册中Mysql数据库章节的介绍,加上自己的理解和说明,整理而 ...

  9. 【RAY TRACING THE REST OF YOUR LIFE 超详解】 光线追踪 3-3 蒙特卡罗 (三)

    开学人倍忙,趁着第二周周末,我们继续图形相关的博客  Preface 今天我们来介绍一些理论方面的东西,为Monte Carlo 应用到我们的光线追踪器做铺垫 我们今天会介绍两章的东西,因为有一章内容 ...

  10. C# 开发圆角控件的具体实现

    http://www.jb51.net/article/47433.htm 代码来源