用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 相关文章推荐
javascript 文章截取部分无损html显示实现代码
May 04 Javascript
jquery 年会抽奖程序
Dec 22 Javascript
jQuery中的$.ajax()方法应用
May 06 Javascript
js清空form表单中的内容示例
May 20 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
Apr 30 Javascript
jquery if条件语句的写法
May 19 Javascript
JS请求servlet功能示例
Jun 01 Javascript
在 Angular中 使用 Lodash 的方法
Feb 11 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 Javascript
vue 移动端记录页面浏览位置的方法
Mar 11 Javascript
vscode中Vue别名路径提示的实现
Jul 31 Javascript
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
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 存取 MySQL 数据库的一个例子
2006/10/09 PHP
PHP获取用户的浏览器与操作系统信息的代码
2012/09/04 PHP
PHP调用Linux的命令行执行文件压缩命令
2013/01/27 PHP
php 删除目录下N分钟前创建的所有文件的实现代码
2013/08/10 PHP
ThinkPHP3.1新特性之命名范围的使用
2014/06/19 PHP
php strftime函数获取日期时间(switch用法)
2018/05/16 PHP
PHP实现负载均衡session共享redis缓存操作示例
2018/08/22 PHP
Draggable Elements 元素拖拽功能实现代码
2011/03/30 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
2014/06/17 Javascript
JavaScript中的apply和call函数详解
2014/07/20 Javascript
PHP中CURL的几个经典应用实例
2015/01/23 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
2016/08/02 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
2017/03/21 Javascript
原生JS发送异步数据请求
2017/06/08 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
2017/09/07 Javascript
关于vue-router的beforeEach无限循环的问题解决
2017/09/09 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
2018/04/22 Javascript
layer弹出层自适应高度,垂直水平居中的实现
2019/09/16 Javascript
Vue 2.0双向绑定原理的实现方法
2019/10/23 Javascript
用PyQt进行Python图形界面的程序的开发的入门指引
2015/04/14 Python
Python中使用Queue和Condition进行线程同步的方法
2016/01/19 Python
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
python pandas消除空值和空格以及 Nan数据替换方法
2018/10/30 Python
基于python实现名片管理系统
2018/11/30 Python
python日志logging模块使用方法分析
2019/05/23 Python
python3.x 生成3维随机数组实例
2019/11/28 Python
有影响力的品牌之家:Our Social Collective
2019/06/08 全球购物
如何处理简单的PHP错误
2015/10/14 面试题
行政总监岗位职责
2013/12/05 职场文书
2015年幼儿园毕业感言
2014/02/12 职场文书
花坛标语大全
2014/06/30 职场文书
教师节学生演讲稿
2014/09/03 职场文书
见习报告格式要求
2014/11/04 职场文书
2015年乡镇民政工作总结
2015/05/13 职场文书
奠基仪式致辞
2015/07/30 职场文书
2016年区委书记抓基层党建工作公开承诺书
2016/03/25 职场文书