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

相关文章

  • 使用JS读秒使用示例

    使用JS读秒使用示例

    JS读秒,在某些情况下还是比较实用的,下面有个简单的示例,感兴趣的朋友可以参考下
    2013-09-09
  • 学习JavaScript设计模式之迭代器模式

    学习JavaScript设计模式之迭代器模式

    这篇文章主要为大家介绍了JavaScript设计模式中的迭代器模式,对JavaScript设计模式感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 微信小程序中子页面向父页面传值实例详解

    微信小程序中子页面向父页面传值实例详解

    这篇文章主要介绍了微信小程序中子页面向父页面传值实例详解的相关资料,需要的朋友可以参考下
    2017-03-03
  • JS动态加载脚本并执行回调操作

    JS动态加载脚本并执行回调操作

    这篇文章主要为大家详细介绍了JS动态加载脚本并下载完成后执行回调操作,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • 微信小程序-可移动菜单的实现过程详解

    微信小程序-可移动菜单的实现过程详解

    这篇文章主要介绍了微信小程序-可移动菜单的实现过程详解,我们可以经常看到手机app里有的菜单栏是悬浮在首页的,用户可以拖动和点击菜单栏进行交互,今天就教大家利用小程序的控件,,需要的朋友可以参考下
    2019-06-06
  • JavaScript鼠标拖拽事件详解

    JavaScript鼠标拖拽事件详解

    这篇文章主要为大家详细介绍了JavaScript鼠标拖拽事件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-04-04
  • js+css实现增加表单可用性之提示文字

    js+css实现增加表单可用性之提示文字

    平常设计表单的时候,我们会加入一些提示文字,最常见的做法是利用value来设置,下面与大家分享一个实例,感兴趣的朋友可以参考下哈
    2013-06-06
  • 异步加载script的代码

    异步加载script的代码

    通过异步请求另一页面的script 是不执行的,只返回html 原文件,因为返回的文本没有经过浏览器的解析执行。
    2011-01-01
  • 你知道setTimeout是如何运行的吗?

    你知道setTimeout是如何运行的吗?

    你真的知道setTimeout是如何运行的吗?这篇文章主要介绍了setTimeout运行方式,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • window.open打开窗口被拦截的快速解决方法

    window.open打开窗口被拦截的快速解决方法

    下面小编就为大家带来一篇window.open打开窗口被拦截的快速解决方法。觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08

最新评论