用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 相关文章推荐
判断iframe是否加载完成的完美方法
Jan 07 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
Nov 30 Javascript
JavaScript的setAttribute兼容性问题解决方法
Nov 11 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
Sep 15 Javascript
BootStrap表单控件之文本域textarea
May 23 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
Jan 08 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
Dec 20 Javascript
微信小程序API—获取定位的详解
Apr 30 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
Sep 05 Javascript
JavaScript基础之this和箭头函数详析
Sep 05 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
Sep 24 Javascript
vue 图片裁剪上传组件的实现
Nov 12 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性能优化的介绍
2013/06/20 PHP
php面向对象中的魔术方法中文说明
2014/03/04 PHP
php实现扫描二维码根据浏览器类型访问不同下载地址
2014/10/15 PHP
PHP文件读取功能的应用实例
2015/05/08 PHP
php数据访问之增删改查操作
2016/05/09 PHP
php禁用函数设置及查看方法详解
2016/07/25 PHP
yii2实现分页,带搜索的分页功能示例
2017/01/07 PHP
PHP explode()函数用法讲解
2019/02/15 PHP
简单的js分页脚本
2009/05/21 Javascript
JavaScript的eval JSON object问题
2009/11/15 Javascript
Jquery下attr和removeAttr的使用方法
2010/12/28 Javascript
快速排序 php与javascript的不同之处
2011/02/22 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
node.js中的fs.lstat方法使用说明
2014/12/16 Javascript
jQuery实现弹出窗口中切换登录与注册表单
2015/06/05 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
2015/07/01 Javascript
大型JavaScript应用程序架构设计模式
2016/06/29 Javascript
原生javascript移动端滑动banner效果
2017/03/10 Javascript
判断滚动条滑到底部触发事件(实例讲解)
2017/11/15 Javascript
解析Vue.js中的组件
2018/02/02 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
2020/07/24 Javascript
关于vue属性使用和不使用冒号的区别说明
2020/10/22 Javascript
python统计cpu利用率的方法
2015/06/02 Python
Python设计实现的计算器功能完整实例
2017/08/18 Python
python学习入门细节知识点
2018/03/29 Python
对python多线程SSH登录并发脚本详解
2019/02/14 Python
python 函数中的内置函数及用法详解
2019/07/02 Python
python反编译教程之2048小游戏实例
2021/03/03 Python
使用HTML5和CSS3表单验证功能
2017/05/05 HTML / CSS
构造方法和其他方法的区别?怎么调用父类的构造方法
2013/09/22 面试题
员工培训心得体会
2013/12/30 职场文书
职务聘任书范文
2014/03/29 职场文书
《狼和小羊》教学反思
2014/04/20 职场文书
电子信息工程自荐信
2014/05/26 职场文书
Golang 语言控制并发 Goroutine的方法
2021/06/30 Golang
nginx作grpc的反向代理踩坑总结
2021/07/07 Servers