用JS将搜索的关键字高亮显示实现代码

更新时间：2013年11月08日 16:54:46 作者：

这篇文章介绍了JS将搜索的关键字高亮显示实现代码，有需要的朋友可以参考一下

用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>

您可能感兴趣的文章:

Bootstrap表格使用方法详解
这篇文章主要为大家详细介绍了Bootstrap表格使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-02-02
JavaScript新窗口与子窗口传值详解
这篇文章主要介绍了JavaScript新窗口与子窗口之间的传值,需要的朋友可以参考下
2014-02-02
layui清空,重置表单数据的实例
今天小编就为大家分享一篇layui清空,重置表单数据的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
swiper Scrollbar滚动条组件详解
这篇文章主要为大家详细介绍了swiper Scrollbar滚动条组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-09-09
javascript 贪吃蛇实现代码
最近在学Javascript，花了半个月的时间终于把《Javascript权威指南》(推荐此书，入门级) 扫完。在学习的过程中发现使用JS实现动态效果挺有趣的。
2008-11-11
JavaScript插件化开发教程（三）
前面我们学习了jQuery的方式开发插件，讲诉的都是些基础的理论知识，今天开始，我们就来实战一下，学习开发自己的插件库。
2015-01-01
举例说明javascript冒泡排序
这篇文章主要为大家介绍了javascript冒泡排序，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-11-11
获取元素距离浏览器周边的位置的方法getBoundingClientRect
本文为大家介绍下如何使用getBoundingClientRect()方法获取元素距离浏览器周边的位置，有类似问题的朋友可以参考下哈，希望对你学习js有所帮助
2013-04-04
普通web整合quartz跑定时任务的示例
这篇文章主要介绍了普通web整合quartz跑定时任务,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-03-03
PHP捕捉异常中断的方法
相信每位PHP程序员都知道，当PHP程序出现异常情况，如出现致命错误、超时或者不可知的逻辑错误导致程序中断，这个时候就可以用 register_shutdown_function进行异常处理。下面本文给出了详细的示例代码，有需要的朋友们下面来一起看看吧。
2016-10-10