用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后代选择器用法实例
Dec 23 Javascript
JS实现控制表格行内容垂直对齐的方法
Mar 30 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
Aug 21 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
Oct 21 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
Dec 20 Javascript
JS交互点击WKWebView中的图片实现预览效果
Jan 05 Javascript
React Navigation 使用中遇到的问题小结
May 08 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
Apr 26 Javascript
微信小程序学习总结(五)常见问题实例小结
Jun 04 Javascript
解决Nuxt使用axios跨域问题
Jul 06 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
Oct 24 Javascript
解决vue-router的beforeRouteUpdate不能触发
Apr 14 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文件上传类分享
2014/11/18 PHP
thinkPHP实现瀑布流的方法
2014/11/29 PHP
VPS中使用LNMP安装WordPress教程
2014/12/28 PHP
PHP编程中的Session阻塞问题与解决方法分析
2017/08/07 PHP
php实现多站点共用session实现单点登录的方法详解
2019/09/18 PHP
优秀js开源框架-jQuery使用手册(1)
2007/03/10 Javascript
浅谈javascript的数据类型检测
2010/07/10 Javascript
javascript奇异的arguments分析
2010/10/20 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
2011/12/01 Javascript
jquery getScript动态加载JS方法改进详解
2012/11/15 Javascript
JavaScript中“基本类型”之争小结
2013/01/03 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
2013/01/25 Javascript
JavaScript开发者必备的10个Sublime Text插件
2016/02/27 Javascript
使用微信小程序开发前端【快速入门】
2016/12/05 Javascript
浅谈vue首屏加载优化
2018/06/28 Javascript
js比较两个单独的数组或对象是否相等的实例代码
2019/04/28 Javascript
Vue 实现简易多行滚动&quot;弹幕&quot;效果
2020/01/02 Javascript
JS document对象简单用法完整示例
2020/01/14 Javascript
使用Python内置的模块与函数进行不同进制的数的转换
2016/03/12 Python
详解K-means算法在Python中的实现
2017/12/05 Python
Python 中的lambda函数介绍
2018/10/10 Python
在Python中字符串、列表、元组、字典之间的相互转换
2019/11/15 Python
pytorch 实现tensor与numpy数组转换
2019/12/27 Python
python实现登录与注册系统
2020/11/30 Python
python+opencv3.4.0 实现HOG+SVM行人检测的示例代码
2021/01/28 Python
惠普新加坡官方商店:HP Singapore
2020/04/17 全球购物
工程班组长岗位职责
2013/12/30 职场文书
中班中秋节活动反思
2014/02/18 职场文书
工作收入住址证明
2014/10/28 职场文书
2014年禁毒工作总结
2014/11/24 职场文书
老公出轨后的保证书
2015/05/08 职场文书
因个人原因离职的辞职信范文
2015/05/12 职场文书
六一儿童节新闻稿
2015/07/17 职场文书
工程移交协议书
2016/03/24 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书