用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函数
Jul 21 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
Sep 15 Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
Jul 17 Javascript
js中的cookie的读写操作示例详解
Apr 17 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
Sep 11 Javascript
JS匿名函数类生成方式实例分析
Nov 26 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
Dec 16 Javascript
bootstrap下拉菜单使用方法解析
Jan 13 Javascript
canvas绘制环形进度条
Feb 23 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
Nov 02 Javascript
vue translate peoject实现在线翻译功能【新手必看】
Jun 07 Javascript
如何理解Vue简单状态管理之store模式
May 15 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
PHP脚本数据库功能详解(下)
2006/10/09 PHP
PHP支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
WordPress中登陆后关闭登陆页面及设置用户不可见栏目
2015/12/31 PHP
CI框架表单验证实例详解
2016/11/21 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
php框架CodeIgniter使用redis的方法分析
2018/04/13 PHP
javascript实现des解密加密全过程
2014/04/03 Javascript
jQuery滚动加载图片实现原理
2015/12/14 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
2016/08/03 Javascript
html+js+highcharts绘制圆饼图表的简单实例
2016/08/04 Javascript
js转html实体的方法
2016/09/27 Javascript
VueRouter导航守卫用法详解
2017/12/25 Javascript
Vue实现PopupWindow组件详解
2018/04/28 Javascript
Vue实现左右菜单联动实现代码
2018/08/12 Javascript
vuejs 制作背景淡入淡出切换动画的实例
2018/09/01 Javascript
最简单的JS实现json转csv的方法
2019/01/10 Javascript
微信小程序实现bindtap等事件传参
2019/04/08 Javascript
ElementUI Tag组件实现多标签生成的方法示例
2019/07/08 Javascript
vue项目打包之开发环境和部署环境的实现
2020/04/23 Javascript
webpack4从0搭建组件库的实现
2020/11/29 Javascript
Java Web开发过程中登陆模块的验证码的实现方式总结
2016/05/25 Python
Python入门之三角函数全解【收藏】
2017/11/08 Python
python下载微信公众号相关文章
2019/02/26 Python
Python turtle库绘制菱形的3种方式小结
2019/11/23 Python
keras的backend 设置 tensorflow,theano操作
2020/06/30 Python
大三在校生电子商务求职信
2013/10/29 职场文书
小学音乐教学反思
2014/02/05 职场文书
自荐书范文范例
2014/02/13 职场文书
王老吉广告词
2014/03/20 职场文书
保险公司晨会主持词
2014/03/22 职场文书
应届生自荐信
2014/06/30 职场文书
教师党员批评与自我批评发言稿
2014/10/15 职场文书
餐厅服务员管理制度
2015/08/05 职场文书
Python echarts实现数据可视化实例详解
2022/03/03 Python
CSS子盒子水平和垂直居中的五种方法
2022/07/23 HTML / CSS