用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的超简单上下翻
Apr 20 Javascript
深入理解JavaScript系列(2) 揭秘命名函数表达式
Jan 15 Javascript
纯js网页画板(Graphics)类简介及实现代码
Dec 24 Javascript
12种不宜使用的Javascript语法整理
Nov 04 Javascript
Ajax同步与异步传输的示例代码
Nov 21 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
Mar 03 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
Sep 01 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
Dec 03 Javascript
js判断上传文件后缀名是否合法
Jan 28 Javascript
基于 Node.js 实现前后端分离
Apr 23 Javascript
常用的js方法合集
Mar 10 Javascript
js页面加载后执行的几种方式小结
Jan 30 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提取数据库内容中的图片地址并循环输出
2010/03/21 PHP
php使浏览器直接下载pdf文件的方法
2013/11/15 PHP
浅析php单例模式
2014/11/25 PHP
javascript 命名空间以提高代码重用性
2008/11/13 Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
2010/06/01 Javascript
jQuery Ajax 实例全解析
2011/04/20 Javascript
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
Javascript selection的兼容性写法介绍
2013/12/20 Javascript
vue两个组件间值的传递或修改方式
2018/07/04 Javascript
layui使用label标签的方法
2019/09/14 Javascript
javascript 高级语法之继承的基本使用方法示例
2019/11/11 Javascript
如何使用Javascript中的this关键字
2020/05/28 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
2020/06/24 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
2020/07/22 Javascript
分享8个JavaScript库可更好地处理本地存储
2020/10/12 Javascript
Python实现爬取知乎神回复简单爬虫代码分享
2015/01/04 Python
Python编程中用close()方法关闭文件的教程
2015/05/24 Python
浅谈使用Python内置函数getattr实现分发模式
2018/01/22 Python
pygame游戏之旅 按钮上添加文字的方法
2018/11/21 Python
Django使用模板后无法找到静态资源文件问题解决
2019/07/19 Python
vscode 配置 python3开发环境的方法
2019/09/19 Python
python中property和setter装饰器用法
2019/12/19 Python
pytorch中的自定义反向传播,求导实例
2020/01/06 Python
pytorch模型预测结果与ndarray互转方式
2020/01/15 Python
Python爬取阿拉丁统计信息过程图解
2020/05/12 Python
玩具反斗城美国官网:Toys"R"Us
2016/09/17 全球购物
美国背景检查、公共记录和人物搜索网站:BeenVerified
2018/02/25 全球购物
琳达·法罗眼镜英国官网:Linda Farrow英国
2021/01/19 全球购物
应届专科生个人的自我评价
2014/01/05 职场文书
房屋租赁协议书范本
2014/04/10 职场文书
模具设计与制造专业求职信
2014/07/19 职场文书
民警个人对照检查剖析材料
2014/09/17 职场文书
如何做好员工培训计划?
2019/07/09 职场文书
15个值得收藏的JavaScript函数
2021/09/15 Javascript
golang用type-switch判断interface的实际存储类型
2022/04/14 Golang