用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 相关文章推荐
JS对URL字符串进行编码/解码分析
Oct 25 Javascript
JQuery自定义事件的应用 JQuery最佳实践
Aug 01 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
Mar 04 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
Nov 17 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
Apr 15 Javascript
Vue.js每天必学之构造器与生命周期
Sep 05 Javascript
微信小程序使用第三方库Underscore.js步骤详解
Sep 27 Javascript
解决循环中setTimeout执行顺序的问题
Jun 20 Javascript
微信小程序框架wepy之动态控制类名
Sep 14 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
Aug 29 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
Nov 26 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
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
MOTOROLA 摩托罗拉 MODEL 66-XI五灯中波收音机
2021/03/02 无线电
Php+SqlServer实现分页显示
2006/10/09 PHP
PHP callback函数使用方法和注意事项
2015/01/23 PHP
Zend Framework分发器用法示例
2016/12/11 PHP
PHP5.6读写excel表格文件操作示例
2019/02/26 PHP
经典的解除许多网站无法复制文字的绝招
2006/12/31 Javascript
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
2010/01/15 Javascript
Javascript下判断是否为闰年的Datetime包
2010/10/26 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
2015/04/27 Javascript
AngularJS基础学习笔记之指令
2015/05/10 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
2015/08/24 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
JQuery给select添加/删除节点的实现代码
2016/04/26 Javascript
javascript实现鼠标点击页面 移动DIV
2016/12/02 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
2017/07/19 Javascript
浅析vue-router原理
2018/10/19 Javascript
JS实现求5的阶乘示例
2019/01/21 Javascript
jQuery实现全选按钮
2021/01/01 jQuery
原生JS实现音乐播放器的示例代码
2021/02/25 Javascript
[03:48]显微镜下的DOTA2第四期——TP动作
2014/06/20 DOTA
[04:02]2014DOTA2国际邀请赛 BBC每日综述中国战队将再度登顶
2014/07/21 DOTA
手把手教你python实现SVM算法
2017/12/27 Python
python itchat给指定联系人发消息的方法
2019/06/11 Python
Pyqt QImage 与 np array 转换方法
2019/06/27 Python
python中比较两个列表的实例方法
2019/07/04 Python
Django中的用户身份验证示例详解
2019/08/07 Python
基于python3监控服务器状态进行邮件报警
2019/10/19 Python
一个C/C++编程面试题
2013/11/10 面试题
北京捷通华声语音技术有限公司Java软件工程师笔试题
2012/04/10 面试题
培训主管的岗位职责
2013/11/23 职场文书
公司同意接收函
2014/01/13 职场文书
生日宴会主持词
2014/03/20 职场文书
人事任命书格式
2014/06/05 职场文书
优秀教师先进个人事迹材料
2014/08/31 职场文书
学生会宣传部竞选稿
2015/11/21 职场文书
Nginx安装完成没有生成sbin目录的解决方法
2021/03/31 Servers