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


Posted in Javascript onJune 30, 2013
//高亮显示搜索到的关键字
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 相关文章推荐
Jquery each方法跳出循环,并获取返回值(实例讲解)
Dec 12 Javascript
js关于字符长度限制的问题示例探讨
Jan 24 Javascript
jQuery中map()方法用法实例
Jan 06 Javascript
jquery判断密码强度的验证代码
Apr 22 Javascript
jQuery对象与DOM对象转换方法详解
May 10 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
Sep 14 Javascript
js实现非常棒的弹出div
Oct 06 Javascript
Angular2库初探
Mar 01 Javascript
vue父组件给子组件的组件传值provide inject的方法
Oct 23 Javascript
详解Vue的watch中的immediate与watch是什么意思
Dec 30 Javascript
原生js实现瀑布流效果
Mar 09 Javascript
JS实现简单移动端鼠标拖拽
Jul 23 Javascript
Jquery网页出现的乱码问题的三种解决方法
Jun 30 #Javascript
JavaScript全排列的六种算法 具体实现
Jun 29 #Javascript
利用js 进行输入框自动匹配字符的小例子
Jun 29 #Javascript
JS Replace()的高级使用方法介绍
Jun 29 #Javascript
jQuery.extend()的实现方式详解及实例
Jun 29 #Javascript
JS 退出系统并跳转到登录界面的实现代码
Jun 29 #Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
Jun 29 #Javascript
You might like
php inc文件使用的风险和注意事项
2013/11/12 PHP
php去除换行(回车换行)的三种方法
2014/03/26 PHP
AES加解密在php接口请求过程中的应用示例
2016/10/26 PHP
PHP操作MongoDB实现增删改查功能【附php7操作MongoDB方法】
2018/04/24 PHP
tp5框架无刷新分页实现方法分析
2019/09/26 PHP
document.createElement()用法及注意事项(ff下不兼容)
2013/03/13 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
2014/06/30 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
javascript常用功能汇总
2015/07/05 Javascript
javascript闭包(Closure)用法实例简析
2015/11/30 Javascript
js判断登陆用户名及密码是否为空的简单实例
2016/05/16 Javascript
vue-cli如何添加less 以及sass
2017/07/06 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
2017/07/12 Javascript
详解React 16 中的异常处理
2017/07/28 Javascript
javascript中神奇的 Date对象小结
2017/10/12 Javascript
使用JS代码实现俄罗斯方块游戏
2018/08/03 Javascript
vue后台管理之动态加载路由的方法
2018/08/13 Javascript
解决vue中虚拟dom,无法实时更新的问题
2018/09/15 Javascript
jQuery实现每日秒杀商品倒计时功能
2019/09/06 jQuery
Nodejs监控事件循环异常示例详解
2019/09/22 NodeJs
Python解析网页源代码中的115网盘链接实例
2014/09/30 Python
老生常谈进程线程协程那些事儿
2017/07/24 Python
python实现数据预处理之填充缺失值的示例
2017/12/22 Python
Python+OpenCV感兴趣区域ROI提取方法
2019/01/10 Python
带你认识Django
2019/01/15 Python
10分钟教你用python动画演示深度优先算法搜寻逃出迷宫的路径
2019/08/12 Python
浅谈Python中re.match()和re.search()的使用及区别
2020/04/14 Python
Scrapy实现模拟登录的示例代码
2021/02/21 Python
浅谈Html5移动端ios/Android兼容性总结
2018/06/01 HTML / CSS
如何在Cookie里面保存Unicode和国际化字符
2013/05/25 面试题
英智兴达软件测试笔试题
2016/10/12 面试题
春节活动策划方案
2014/01/24 职场文书
模范教师事迹材料
2014/02/10 职场文书
细节决定成败演讲稿
2014/05/12 职场文书
思品教学工作总结
2015/08/10 职场文书
python中的sys模块和os模块
2022/03/20 Python