用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构造器的实现代码小结
May 16 Javascript
js Function类型
Dec 04 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
Nov 30 Javascript
微信小程序 页面传参实例详解
Nov 16 Javascript
Angualrjs和bootstrap相结合实现数据表格table
Mar 30 Javascript
JavaScript输入框字数实时统计更新
Jun 17 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
Sep 01 Javascript
JS实现二维数组元素的排列组合运算简单示例
Jan 28 Javascript
JS实现选项卡效果的代码实例
May 20 Javascript
详解vuex之store源码简单解析
Jun 13 Javascript
通过说明与示例了解js五种设计模式
Jun 17 Javascript
layui 解决富文本框form表单提交为空的问题
Oct 26 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中使用与Perl兼容的正则表达式
2006/11/26 PHP
php中几种常见安全设置详解
2010/04/06 PHP
那些年我们错过的魔术方法(Magic Methods)
2014/01/14 PHP
XHTML-Strict 内允许出现的标签
2006/12/11 Javascript
JavaScript CSS 修改学习第四章 透明度设置
2010/02/19 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
2014/01/07 Javascript
Javascript中Array用法实例分析
2015/06/13 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
2016/12/26 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
2017/01/19 Javascript
运用jQuery写的验证表单(实例讲解)
2017/07/06 jQuery
jQuery中图片展示插件highslide.js的简单dom
2018/04/22 jQuery
vue项目打包后打开页面空白解决办法
2018/06/29 Javascript
layui中使用jquery控制radio选中事件的示例代码
2018/08/15 jQuery
Angular6 正则表达式允许输入部分中文字符
2018/09/10 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
2018/12/03 Javascript
selenium+java中用js来完成日期的修改
2019/10/31 Javascript
微信小程序canvas截取任意形状的实现代码
2020/01/13 Javascript
基于JS实现操作成功之后自动跳转页面
2020/09/25 Javascript
Python lambda和Python def区别分析
2014/11/30 Python
python扫描proxy并获取可用代理ip的实例
2017/08/07 Python
Python获取当前公网ip并自动断开宽带连接实例代码
2018/01/12 Python
Python-openpyxl表格读取写入的案例详解
2020/11/02 Python
Alpine安装Python3依赖出现的问题及解决方法
2020/12/25 Python
CSS3 Columns分列式布局方法简介
2014/05/03 HTML / CSS
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
2013/01/06 HTML / CSS
日本小田急百货官网:Odakyu
2018/07/19 全球购物
项目经理岗位职责
2013/11/11 职场文书
总经理助理的八要求
2013/11/12 职场文书
解除合同协议书
2014/04/17 职场文书
小学教师师德演讲稿
2014/05/06 职场文书
大学生个人学年总结
2015/02/15 职场文书
英文诗歌翻译方法(赏析)
2019/08/16 职场文书
spring cloud 配置中心客户端启动遇到的问题
2021/09/25 Java/Android
【海涛七七解说】DCG第二周:DK VS 天禄
2022/04/01 DOTA
《王者天下》第4季首话新剧照 4月9日正式开播
2022/04/07 日漫
python使用shell脚本创建kafka连接器
2022/04/29 Python