js正文内容高亮效果的实现方法

 更新时间:2013年06月30日 15:53:41   作者:   我要评论
这篇文章介绍了js正文内容高亮效果的实现方法,有需要的朋友可以参考一下
复制代码 代码如下:

//高亮显示搜索到的关键字
function HeightLight(Keyword)
{
 //文本选择器
 var TextRange;
 //是否找到
 var Found=false;
 //找到的次数
 var Count = 0;
 TextRange = document.body.createTextRange();
 Found = TextRange.findText(Keyword);
 if (Found)
 {
  Count++;
 }
 while (Found && Count > 0)
 {
  TextRange.pasteHTML('<span style="background:yellow">' + Keyword + '</span>');
  //将滚动条定位到第一次查到的视口范围内
  if(Count==1)
  {
   TextRange.scrollIntoView();
  }
  //继续查找
  Found = TextRange.findText(Keyword);
  if (!Found)
  {
   Count = 0;
  }
  else
  {
   Count++;
  }
 }
}
//正则式法
function highLight(ele,keys)
{
 var reg = new RegExp("(" + keys.replace(/,/,"|") + ")","g");
 ele.innerHTML = ele.innerHTML.replace(reg,"<font color=\"red\">$1</font>");
}

相关文章

  • JavaScript闭包的简单应用

    JavaScript闭包的简单应用

    这篇文章主要为大家详细介绍了JavaScript闭包的简单应用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • JavaScript如何自定义trim方法

    JavaScript如何自定义trim方法

    本文介绍了如何自定义trim方法,trim的作用就是去除字符串前后空格,这个方法在字符串处理方面很有实用价值,需要的朋友可以参考下
    2015-07-07
  • js charAt的使用示例

    js charAt的使用示例

    这篇文章主要介绍了js charAt的使用方法,需要的朋友可以参考下
    2014-02-02
  • 多浏览器兼容的动态加载 JavaScript 与 CSS

    多浏览器兼容的动态加载 JavaScript 与 CSS

    Omar AL Zabir这位MVP总是喜欢搞些稀奇古怪同时又很实用的小东西,并且还十分值得参考。最近他就做了一个叫做ensure的小工具用于动态加载JavaScript、CSS与HTML,而且IE、Firefox、Opera、Safari都支持了,那么我们就来看看ensure是如何做到动态加载JavaScript与CSS的。
    2008-09-09
  • js解决软键盘遮挡输入框的问题分享

    js解决软键盘遮挡输入框的问题分享

    下面小编就为大家推荐一篇js解决软键盘遮挡输入框的问题分享,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • js中用事实证明cssText性能高的问题

    js中用事实证明cssText性能高的问题

    首先要感谢 EtherDream 的不同观点,在 巧用cssText属性批量操作样式 一篇中由于他的质疑态度使我做了进一步的测试。
    2011-03-03
  • 基于JavaScript实现五子棋游戏

    基于JavaScript实现五子棋游戏

    这篇文章主要为大家详细介绍了基于JavaScript实现五子棋游戏,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • JavaScript实现购物车基本功能

    JavaScript实现购物车基本功能

    这篇文章主要为大家详细介绍了JavaScript实现购物车的基本功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • JavaScript ES6中CLASS的使用详解

    JavaScript ES6中CLASS的使用详解

    class是es6引入的最重要特性之一。在没有class之前,我们只能通过原型链来模拟类。这篇文章我们将详细的介绍关于ES6中CLASS的使用,有需要的朋友们可以参考借鉴,下面来一起看看吧。
    2016-11-11
  • webpack学习教程之前端性能优化总结

    webpack学习教程之前端性能优化总结

    webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。这篇文章主要给大家总结介绍了关于webpack学习教程之前端性能优化的相关资料,需要的朋友可以参考下。
    2017-12-12

最新评论