用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实现的Ajax 验证用户名是否存在的实现代码
Apr 06 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
Mar 05 Javascript
JQuery中$(document)是什么意思有什么作用
Jul 21 Javascript
javascript设置页面背景色及背景图片的方法
Dec 29 Javascript
JavaScript html5 canvas绘制时钟效果
Mar 01 Javascript
angular.js指令中的controller、compile与link函数的不同之处
May 10 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
Jul 04 Javascript
React Native使用fetch实现图片上传的示例代码
Mar 07 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
Jun 12 Javascript
世界上最短的数字判断js代码
Sep 09 Javascript
vue element-ui实现input输入框金额数字添加千分位
Dec 29 Javascript
JS删除数组指定值常用方法详解
Jun 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
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
php中inlcude()性能对比详解
2012/09/16 PHP
php中的常用魔术方法总结
2013/08/02 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
Yii2.0框架模型添加/修改/删除数据操作示例
2019/07/18 PHP
JavaScript的Function详细
2006/11/14 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
2014/02/12 Javascript
js结合正则实现国内手机号段校验
2015/06/19 Javascript
Ajax清除浏览器js、css、图片缓存的方法
2015/08/06 Javascript
JS平滑无缝滚动效果的实现代码
2016/05/06 Javascript
javascript检测移动设备横竖屏
2016/05/21 Javascript
JavaScript中闭包之浅析解读(必看篇)
2016/08/25 Javascript
微信小程序入门教程
2016/11/18 Javascript
javascript中神奇的 Date对象小结
2017/10/12 Javascript
angular实现页面打印局部功能的思考与方法
2018/04/13 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
2018/09/10 Javascript
angularJs中$scope数据序列化的实例
2018/09/30 Javascript
node.js基于socket.io快速实现一个实时通讯应用
2019/04/23 Javascript
js实现轮播图效果 z-index实现轮播图
2020/01/17 Javascript
浅谈Vue组件单元测试究竟测试什么
2020/02/05 Javascript
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
浅谈python多进程共享变量Value的使用tips
2019/07/16 Python
django admin.py 外键,反向查询的实例
2019/07/26 Python
python实现windows倒计时锁屏功能
2019/07/30 Python
python编写猜数字小游戏
2019/10/06 Python
Python使用matplotlib 画矩形的三种方式分析
2019/10/31 Python
使用SQLAlchemy操作数据库表过程解析
2020/06/10 Python
keras实现多种分类网络的方式
2020/06/11 Python
用CSS3实现Win8风格的方格导航菜单效果
2013/04/10 HTML / CSS
在HTML5中如何使用CSS建立不可选的文字
2014/10/17 HTML / CSS
墨尔本复古时尚品牌:Dangerfield
2018/12/12 全球购物
美国名表在线商城:Ashford(支持中文)
2019/09/24 全球购物
决定成败的关键——创业计划书
2014/01/24 职场文书
30岁生日感言
2014/01/25 职场文书
A22国内电台短波广播频率表
2022/05/10 无线电
Win10多屏显示如何设置?Win10电脑多屏显示设置操作方法
2022/07/07 数码科技