用JS将搜索的关键字高亮显示实现代码


Posted in Javascript onNovember 08, 2013

用JS让文章内容指定的关键字加亮

是这样的..

现在有这些关键字:美容,生活,购物
当在文章里头出现这些关键字,就把它加亮显示..

文章是生成静态页面的,而这些关键字是能随时更新的,所以我想用JS来实现...
不知道怎样来实现这样的功能啊?特此求助

<script language="JavaScript">
function highlight(key) {
 var key = key.split('|');
 for (var i=0; i<key.length; i++) {
  var rng = document.body.createTextRange();
  while (rng.findText(key[i]))
  //rng.pasteHTML(rng.text.fontcolor('red'));
  rng.pasteHTML('<div style="border:1 solid red;display:inline"><a href="#" title="+ rng.text +">' + rng.text + '</a></div>');
 }
}
highlight('文章|关键|功能')
</script>
Javascript 相关文章推荐
jquery对表单操作2
Apr 06 Javascript
修改好的jquery滚动字幕效果实现代码
Jun 22 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
Jul 31 Javascript
js 赋值包含单引号双引号问题的解决方法
Feb 26 Javascript
js、jquery图片动画、动态切换示例代码
Jun 03 Javascript
原生js和jquery实现图片轮播特效
Apr 23 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
Apr 21 Javascript
Angularjs单选改为多选的开发过程及问题解析
Feb 17 Javascript
JavaScript fetch接口案例解析
Aug 30 Javascript
ES6 Symbol数据类型的应用实例分析
Jun 26 Javascript
ES6基础之 Promise 对象用法实例详解
Aug 22 Javascript
JavaScript 与 TypeScript之间的联系
Nov 27 Javascript
jQuery 获取浏览器所在的IP地址的小例子
Nov 08 #Javascript
js去除空格的12种实用方法
Nov 08 #Javascript
js加载之使用DOM方法动态加载Javascript文件
Nov 08 #Javascript
javascript获取url上某个参数的方法
Nov 08 #Javascript
jqgrid 编辑添加功能详细解析
Nov 08 #Javascript
动态加载JS文件的三种方法
Nov 08 #Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
Nov 08 #Javascript
You might like
php使用反射插入对象示例分享
2014/03/11 PHP
支付宝支付开发――当面付条码支付和扫码支付实例
2016/11/04 PHP
PHP简单实现遍历目录下特定文件的方法小结
2017/05/22 PHP
php二维码生成以及下载实现
2017/09/28 PHP
php测试kafka项目示例
2020/02/06 PHP
符合W3C网页标准的iframe标签的使用方法
2007/07/19 Javascript
jquery获取div宽度的实现思路与代码
2013/01/13 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
2014/02/13 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
2014/05/14 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
2014/09/01 Javascript
浅析node.js中close事件
2014/11/26 Javascript
解析如何利用iframe标签以及js制作时钟
2016/12/08 Javascript
js css3实现图片拖拽效果
2017/03/04 Javascript
React + webpack 环境配置的方法步骤
2017/09/07 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
2020/06/16 Javascript
uniapp电商小程序实现订单30分钟倒计时
2020/11/01 Javascript
[00:17]DOTA2荣耀之路5:It’s a disastah!
2018/05/28 DOTA
Python中尝试多线程编程的一个简明例子
2015/04/07 Python
Python的Tornado框架异步编程入门实例
2015/04/24 Python
分享一个简单的python读写文件脚本
2017/11/25 Python
基于python3 OpenCV3实现静态图片人脸识别
2018/05/25 Python
使用Python来开发微信功能
2018/06/13 Python
PyQt5 对图片进行缩放的实例
2019/06/18 Python
python爬虫解决验证码的思路及示例
2019/08/01 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
python bluetooth蓝牙信息获取蓝牙设备类型的方法
2019/11/29 Python
解决django中form表单设置action后无法回到原页面的问题
2020/03/13 Python
Python自定义sorted排序实现方法详解
2020/09/18 Python
HTML5中FileReader接口使用方法实例详解
2017/08/26 HTML / CSS
美国在线自行车商店:Jenson USA
2018/05/22 全球购物
美国家庭鞋店:Shoe Sensation
2019/09/27 全球购物
计算机学生求职信范文
2014/01/30 职场文书
会计专业自我鉴定
2014/02/10 职场文书
美化环境标语
2014/06/20 职场文书
2014医学院领导班子对照检查材料思想汇报
2014/09/19 职场文书