原生Js 两种方法实现页面关键字高亮显示
原生Js 两种方法实现页面关键字高亮显示
上网看了看别人写的，不是兼容问题就是代码繁琐，自己琢磨了一下用两种方法都可以实现，各有利弊。
方法一 依靠正则表达式修改
1.获取obj的html
2.统一替换html标签
3.替换要修改的关键字
4.再把html标签修改回去
不足就是如果查找的关键字跟替换的标签一样就有冲突了
效果预览：http://jsfiddle.net/dtdxrk/EAqkN/embedded/result/
1 <!DOCTYPE HTML>
2 <html lang="en">
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4 <head>
5 <title>方法一 依靠正则表达式修改</title>
6 </head>
7 <body>
8 <div id="result">
9 <p>一个和尚挑水吃、两个和尚抬水吃、三个和尚没水吃。总寺的方丈大人得知情况后，就派来了一名主持和一名书记，共同负责解决这一问题。主持上任后，发现问题的关键是管理不到位，于是就招聘一些和尚成立了寺庙管理部来制定分工流程。为了更好地借鉴国外的先进经验，寺庙选派唐僧等领导干部出国学习取经；此外，他们还专门花钱请了天主教、基督教的神父传授MBA。神父呆了不久留下几个东东就走了，一个叫BPR，一个叫ERP。</p>
10 <p>书记也没闲着，他认为问题的关键在于人才没有充分利用、寺庙文化没有建设好，于是就成立了人力资源部和寺庙工会等等，并认认真真地走起了竞聘上岗和定岗定编的过场。</p>
11 <p>几天后成效出来了，三个和尚开始拼命地挑水了，可问题是怎么挑也不够喝。不仅如此，小和尚都忙着挑水、寺庙里没人念经了，日子一长，来烧香的客人越来越少，香火钱也变得拮据起来。为了解决收入问题，寺庙管理部、人力资源部等连续召开了几天的会，最后决定，成立专门的挑水部负责后勤和专门的烧香部负责市场前台。同时，为了更好地开展工作，寺庙提拔了十几名和尚分别担任副主持、主持助理，并在每个部门任命了部门小主持、副小主持、小主持助理。</p>
12 <p>老问题终于得到缓解了，可新的问题跟着又来了。前台负责念经的和尚总抱怨口渴水不够喝，后台挑水的和尚也抱怨人手不足、水的需求量太大而且没个准儿，不好伺候。</p>
13 <p>为了更好地解决这一矛盾，经开会研究决定，成立一个新的部门：喝水响应部，专门负责协调前后台矛盾。为了便于沟通、协调，每个部门都设立了对口的联系和尚。 协调虽然有了，但效果却不理想，仔细一研究，原来是由于水的需求量不准、水井数量不足等原因造成的。于是各部门又召开了几次会，决定加强前台念经和尚对饮用水的预测和念经和尚对挑水和尚满意度测评等，让前后台签署协定、相互打分，健全考核机制。为了便于打分考核，寺院特意购买了几个计算机系统，包括挑水统计系统、烧香统计系统、普通香客捐款分析系统、大香客捐款分析系统、挨上必死系统（简称IBS系统）、马上就死系统（简称MS系统）等，同时成立香火钱管理部、香火钱出账部、打井策略研究部、打井建设部、打井维护部等等。由于各个系统出来的数总不准确、都不一致，于是又成立了技术开发中心，负责各个系统的维护、二次开发。由于部门太多、办公场地不足，寺院专门成立了综合部来解决这一问题，最后决定把寺院整个变成办公区，香客烧香只许在山门外烧。 </p>
14 <p>部门多、当官的多档和开会自然就多，为了减少文山会海，综合办牵头召开了N次关于减少开会的会，并下达了“关于减少档的档”。同时，为了精简机构、提高效率，寺院还成立了精简机构办公室、机构改革研究部等部门。 </p>
15 <p>一切似乎都合情合理，但香火钱和喝水的问题还是迟迟不能解决。问题在哪呢？有的和尚提出来每月应该开一次分析会，于是经营分析部就应运而生了。分析需要很多数据和报表，可系统总是做不到，于是每个部门都指派了一些和尚手工统计、填写报表、给系统打工。</p>
16 <p>寺院空前地热闹起来，有的和尚在拼命挑水、有的和尚在拼命念经、有的和尚在拼命协调、有的和尚在拼命分析……忙来忙去，水还是不够喝、香火钱还是不够用。什么原因呢？这个和尚说流程不顺、那个和尚说任务分解不合理，这个和尚说部门界面不清、那个和尚说考核力度不够。只有三个人最清楚问题之关键所在，那三个人就是最早的那三个和尚。说来说去，就是***闲人太多了！他们说：“整天瞎分析个屁！什么***流程问题、职责问题、接口问题、考核问题，明明就是机构臃肿问题！早知今日，还不如当初咱们仨自觉自律一点算了！如今倒好，招来了这么一大帮傻B，一个个不干正经事还***人五人六的，跟屎盆子一样甩都甩不掉！”</p>
17 <p>又过了一年，寺院黄了，和尚们也都死了。人们在水井边发现了几具尸体，是累死的；在寺院里发现了几千具尸体，是渴死的。</p>
18 </div>
19
20 <script>
21
22 function keyLight(id, key, bgColor){
23 var oDiv = document.getElementById(id),
24 sText = oDiv.innerHTML,
25 bgColor = bgColor || "orange",
26 sKey = "<span style='background-color: "+bgColor+";'>"+key+"</span>",
27 num = -1,
28 rStr = new RegExp(key, "g"),
29 rHtml = new RegExp("\<.*?\>","ig"), //匹配html元素
30 aHtml = sText.match(rHtml); //存放html元素的数组
31 sText = sText.replace(rHtml, '{~}'); //替换html标签
32 sText = sText.replace(rStr,sKey); //替换key
33 sText = sText.replace(/{~}/g,function(){ //恢复html标签
34 num++;
35 return aHtml[num];
36 });
37
38 oDiv.innerHTML = sText;
39 }
40
41 var key1 = keyLight('result', '和尚')
42 var key2 = keyLight('result', '一', 'red')
43
44
45 </script>
46
47
48 </body>
49 </html>
方法二 遍历节点修改关键字
1.遍历元素节点
2.由于兼容问题删除chrome ff 下面的空白text节点
3.替换关键字
不足就是浏览器兼容，频繁操作节点影响速度
1 <!DOCTYPE HTML>
2 <html lang="en">
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4 <head>
5 <title>方法二 遍历节点修改关键字</title>
6 </head>
7 <body>
8 <div id="result">
9 <p>一个和尚挑水吃、两个和尚抬水吃、三个和尚没水吃。总寺的方丈大人得知情况后，就派来了一名主持和一名书记，共同负责解决这一问题。主持上任后，发现问题的关键是管理不到位，于是就招聘一些和尚成立了寺庙管理部来制定分工流程。为了更好地借鉴国外的先进经验，寺庙选派唐僧等领导干部出国学习取经；此外，他们还专门花钱请了天主教、基督教的神父传授MBA。神父呆了不久留下几个东东就走了，一个叫BPR，一个叫ERP。</p>
10 <p>书记也没闲着，他认为问题的关键在于人才没有充分利用、寺庙文化没有建设好，于是就成立了人力资源部和寺庙工会等等，并认认真真地走起了竞聘上岗和定岗定编的过场。</p>
11 <p>几天后成效出来了，三个和尚开始拼命地挑水了，可问题是怎么挑也不够喝。不仅如此，小和尚都忙着挑水、寺庙里没人念经了，日子一长，来烧香的客人越来越少，香火钱也变得拮据起来。为了解决收入问题，寺庙管理部、人力资源部等连续召开了几天的会，最后决定，成立专门的挑水部负责后勤和专门的烧香部负责市场前台。同时，为了更好地开展工作，寺庙提拔了十几名和尚分别担任副主持、主持助理，并在每个部门任命了部门小主持、副小主持、小主持助理。</p>
12 <p>老问题终于得到缓解了，可新的问题跟着又来了。前台负责念经的和尚总抱怨口渴水不够喝，后台挑水的和尚也抱怨人手不足、水的需求量太大而且没个准儿，不好伺候。</p>
13 <p>为了更好地解决这一矛盾，经开会研究决定，成立一个新的部门：喝水响应部，专门负责协调前后台矛盾。为了便于沟通、协调，每个部门都设立了对口的联系和尚。 协调虽然有了，但效果却不理想，仔细一研究，原来是由于水的需求量不准、水井数量不足等原因造成的。于是各部门又召开了几次会，决定加强前台念经和尚对饮用水的预测和念经和尚对挑水和尚满意度测评等，让前后台签署协定、相互打分，健全考核机制。为了便于打分考核，寺院特意购买了几个计算机系统，包括挑水统计系统、烧香统计系统、普通香客捐款分析系统、大香客捐款分析系统、挨上必死系统（简称IBS系统）、马上就死系统（简称MS系统）等，同时成立香火钱管理部、香火钱出账部、打井策略研究部、打井建设部、打井维护部等等。由于各个系统出来的数总不准确、都不一致，于是又成立了技术开发中心，负责各个系统的维护、二次开发。由于部门太多、办公场地不足，寺院专门成立了综合部来解决这一问题，最后决定把寺院整个变成办公区，香客烧香只许在山门外烧。 </p>
14 <p>部门多、当官的多档和开会自然就多，为了减少文山会海，综合办牵头召开了N次关于减少开会的会，并下达了“关于减少档的档”。同时，为了精简机构、提高效率，寺院还成立了精简机构办公室、机构改革研究部等部门。 </p>
15 <p>一切似乎都合情合理，但香火钱和喝水的问题还是迟迟不能解决。问题在哪呢？有的和尚提出来每月应该开一次分析会，于是经营分析部就应运而生了。分析需要很多数据和报表，可系统总是做不到，于是每个部门都指派了一些和尚手工统计、填写报表、给系统打工。</p>
16 <p>寺院空前地热闹起来，有的和尚在拼命挑水、有的和尚在拼命念经、有的和尚在拼命协调、有的和尚在拼命分析……忙来忙去，水还是不够喝、香火钱还是不够用。什么原因呢？这个和尚说流程不顺、那个和尚说任务分解不合理，这个和尚说部门界面不清、那个和尚说考核力度不够。只有三个人最清楚问题之关键所在，那三个人就是最早的那三个和尚。说来说去，就是***闲人太多了！他们说：“整天瞎分析个屁！什么***流程问题、职责问题、接口问题、考核问题，明明就是机构臃肿问题！早知今日，还不如当初咱们仨自觉自律一点算了！如今倒好，招来了这么一大帮傻B，一个个不干正经事还***人五人六的，跟屎盆子一样甩都甩不掉！”</p>
17 <p>又过了一年，寺院黄了，和尚们也都死了。人们在水井边发现了几具尸体，是累死的；在寺院里发现了几千具尸体，是渴死的。</p>
18 </div>
19
20 <script>
21
22 function keyLight(id, key, bgColor){
23 var oDiv = document.getElementById(id),
24 oChilds = oDiv.childNodes,
25 bgColor = bgColor || "orange",
26 sKey = "<span style='background-color: "+bgColor+";'>"+key+"</span>",
27 rStr = new RegExp(key, "g");
28 for(var i =0; i<oChilds.length-1; i++){
29 if(oChilds[i].nodeType == 3 && /\s/.test(oChilds[i].nodeValue)){ //删除空白的节点
30 oChilds[i].parentNode.removeChild(oChilds[i]);
31 }
32 oChilds[i].innerHTML = oChilds[i].innerHTML.replace(rStr,sKey); //替换key
33 }
34 }
35
36 var key1 = keyLight('result', '和尚');
37 var key2 = keyLight('result', '挑水', 'green');
38
39 </script>
40
41
42 </body>
43 </html>
原生Js 两种方法实现页面关键字高亮显示的更多相关文章
- iframe-父子-兄弟页面相互传值(jq和js两种方法)
参考文章: http://blog.csdn.net/u013299635/article/details/78773207 http://www.cnblogs.com/xyicheng/archi ...
- WordPress引入css/js两种方法
WordPress引入css/js 是我们制作主题时首先面对的一个难点,任何一款主题都要加载自己的css,js,甚至很有可能还需要加载Jquery文件,网上方法特多,说法不一,我们今天借鉴wordpr ...
- 原生js - 两种图片懒加载实现原理
目前图片懒加载的方式主要有两种: 1.利用getBoundingClientRectAPI得到当前元素与视窗的距离来判断 2.利用h5的新API IntersectionObserver 来实现 ge ...
- JavaScript模板引擎artTemplate.js——两种方法实现性别的判定
template.helper(name, callback) name:必传,辅助事件的名称. callback:必传,辅助事件的回调函数. return:undefined 所谓的辅助事件,主要用 ...
- 利用来JS控制页面控件显示和隐藏有两种方法
利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 document.getEle ...
- jquery/js/a标签实现当前页面跳转的两种方法
在逛购物网站首页时经常看到侧边导航栏,当我们点击导航栏中某一项时会跳转到当前页面的某一处 有两种方法实现,一种是利用js计算好各位置的高度,通过绑定事件使页面跳转到指定位置,另一种是利用a标签进行当前 ...
- div随页面滚动遇顶固定的两种方法(js&jQuery)
一.遇顶固定的例子 我一直以为是某个div或层随屏幕滚动,遇顶则固定,离开浏览器顶部又还原这样的例子其实不少,其实它的名字叫“层的智能浮动效果”.目前我们在国内的商业网站上就常常看到这样的效果了.例如 ...
- MyEclipse取消验证Js的两种方法
MyEclipse取消验证Js的两种方法 作者: 字体:[增加 减小] 类型:转载 通过js写一个web工程的相关页面时感觉很卡,修改内存也不行下面有两种解决方法,大家可以尝试下 前言:有时我们通过j ...
- 获取网页URL地址及参数等的两种方法(js和C#)
转:获取网页URL地址及参数等的两种方法(js和C#) 一 js 先看一个示例 用javascript获取url网址信息 <script type="text/javascript&q ...
随机推荐
- git branch(转)
git branch git branch 不带参数:列出本地已经存在的分支,并且在当前分支的前面加“*”号标记,例如: #git branch* master newbranch gi ...
- 【Flume NG用户指南】（2）构造
作者:周邦涛(Timen) Email:zhoubangtao@gmail.com 转载请注明出处: http://blog.csdn.net/zhoubangtao/article/details ...
- .net设计模式之装饰模式
概述: 装饰模式是在不必改变原类文件和使用继承的情况下,动态地扩展一个对象的功能.它是通过创建一个包装对象,也就是装饰来包裹真实的对象. 装饰模式的特点: (1) 装饰对象和真实对象有相同的接口.这样 ...
- 编程算法 - 区间调度问题 代码(C)
区间调度问题 代码(C) 本文地址: http://blog.csdn.net/caroline_wendy 题目: 有n项工作, 每项工作分别在s时间開始, 在t时间结束. 对于每项工作能够选择參与 ...
- Tomcat剖析（三）：连接器(2)
Tomcat剖析(三):连接器(2) 1. Tomcat剖析(一):一个简单的Web服务器 2. Tomcat剖析(二):一个简单的Servlet服务器 3. Tomcat剖析(三):连接器(1) 4 ...
- CSharp设计模式读书笔记（13）：代理模式(学习难度：★★★☆☆，使用频率：★★★★☆)
代理模式:给某一个对象提供一个代理或占位符,并由代理对象来控制对原对象的访问. 模式角色与结构: 示例代码: using System; using System.Collections.Generi ...
- Drop dual
一些互联网用户删除dual表还有一个问题: 删除dual时间表hang直播,然后直接shutdown abort.话又说回来,当您启动数据库.发现open时间已经hang直播.但该数据库是真正开放的另 ...
- 教你一步一步部署.net免费空间OpenShift系列之三------上传ASP.net程序
接上回书,创建应用后,我们如何将自己的ASP.Net部署到应用空间呢,这里用WinSCP的SFTP协议进行上传和下载 上传ASP.net程序 下载WinSCP,并打开PuTTYGen 点击Genera ...
- VisualStudio2012轻松把JSON数据转换到POCO的代码
原文:VisualStudio2012轻松把JSON数据转换到POCO的代码 在Visual Studio 2012中轻松把JSON数据转换到POCO的代码,首先你需要安装Web Esse ...
- ionic入门之色彩、图标和边距和界面组件：列表
色彩 ionic定义了九种前景/背景/边框的色彩样式,: 可以在任何元素上使用这些样式设置前景和背景颜色: <any class="positive-bg energized" ...