用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 相关文章推荐
巧妙破除网页右键禁用的十大绝招
Aug 12 Javascript
AJAX使用了UpdatePanel后无法使用alert弹出脚本
Apr 02 Javascript
js点击事件链接的问题解决
Apr 25 Javascript
Express.JS使用详解
Jul 17 Javascript
jQuery实现带滑动条的菜单效果代码
Aug 26 Javascript
jQuery点击输入框显示验证码图片
May 19 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
May 31 Javascript
JavaScript重定向URL参数的两种方法小结
Oct 19 Javascript
折叠菜单及选择器的运用
Feb 03 Javascript
详解webpack解惑:require的五种用法
Jun 09 Javascript
详解js加减乘除精确计算
Mar 19 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
Jul 04 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处理SQL脚本文件导入到MySQL的代码实例
2014/03/17 PHP
ThinkPHP之getField详解
2014/06/20 PHP
PHP比较运算符的详细介绍
2015/09/29 PHP
PHP+redis实现添加处理投票的方法
2015/11/14 PHP
理解Javascript_01_理解内存分配原理分析
2010/10/11 Javascript
常用Extjs工具:Extjs.util.Format使用方法
2012/03/22 Javascript
javascript回车完美实现tab切换功能
2014/03/13 Javascript
jQuery+ajax实现动态执行脚本的方法
2015/01/27 Javascript
RequireJS入门一之实现第一个例子
2015/09/30 Javascript
javascript计时器编写过程与实现方法
2016/02/29 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
2016/04/20 Javascript
vue-dialog的弹出层组件
2020/05/25 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
2017/12/23 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
2018/02/08 Javascript
Vue2.0用户权限控制解决方案的示例
2018/02/10 Javascript
angular5 httpclient的示例实战
2018/03/12 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
2018/07/09 Javascript
TypeScript 运行时类型检查补充工具
2020/09/28 Javascript
Python获取linux主机ip的简单实现方法
2016/04/18 Python
Jupyter安装nbextensions,启动提示没有nbextensions库
2020/04/23 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
Python八大常见排序算法定义、实现及时间消耗效率分析
2018/04/27 Python
python绘制评估优化算法性能的测试函数
2019/06/25 Python
对python 中class与变量的使用方法详解
2019/06/26 Python
12个步骤教你理解Python装饰器
2019/07/01 Python
用python3 urllib破解有道翻译反爬虫机制详解
2019/08/14 Python
Python3和pyqt5实现控件数据动态显示方式
2019/12/13 Python
django美化后台django-suit的安装配置操作
2020/07/12 Python
世界汽车零件:World Car Parts
2019/09/04 全球购物
公共汽车、火车和飞机票的通用在线预订和销售平台:INFOBUS
2019/11/30 全球购物
前台文员岗位职责及工作流程
2013/11/19 职场文书
学校十一活动方案
2014/02/01 职场文书
群众路线剖析材料(四风)
2014/11/05 职场文书
介绍信的写法
2015/01/31 职场文书
幼儿园中班个人总结
2015/02/28 职场文书
TV动画《八十龟酱观察日记》第四季宣传PV公布
2022/04/06 日漫