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 相关文章推荐
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
Oct 18 Javascript
JavaScript 对象深入学习总结(经典)
Sep 29 Javascript
深入理解Angular2 模板语法
Aug 07 Javascript
微信小程序 增、删、改、查操作实例详解
Jan 13 Javascript
基于jQuery制作小图标上下滑动特效
Jan 18 Javascript
JS实现为动态创建的元素添加事件操作示例
Mar 17 Javascript
vue实现点击展开点击收起效果
Apr 27 Javascript
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
node 标准输入流和输出流代码实例
Sep 19 Javascript
JS实现拼图游戏
Jan 29 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
Mar 17 Javascript
Javascript中Microtask和Macrotask鲜为人知的知识点
Apr 02 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和XSL stylesheets转换XML文档
2006/10/09 PHP
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
PHP简单读取PDF页数的实现方法
2016/07/21 PHP
Zend Framework动作控制器用法示例
2016/12/09 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
js的toLowerCase方法用法实例
2015/01/27 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
2015/04/16 Javascript
D3.js中data(), enter() 和 exit()的问题详解
2015/08/17 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
2016/06/21 Javascript
利用BootStrap弹出二级对话框的简单实现方法
2016/09/21 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
2016/11/25 Javascript
基于ajax与msmq技术的消息推送功能实现代码
2016/12/26 Javascript
Vue上传组件vue Simple Uploader的用法示例
2017/08/25 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
2017/12/11 Javascript
Angular实现的进度条功能示例
2018/02/18 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
2019/05/12 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
2019/11/01 Javascript
通过js随机函数Math.random实现乱序
2020/05/19 Javascript
Python并发之多进程的方法实例代码
2018/08/15 Python
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
女装和独特珠宝:Sundance Catalog
2018/09/19 全球购物
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
存储过程的优缺点是什么
2015/01/10 面试题
怎么可以提高数据库查询数据的速度
2014/06/28 面试题
文秘专业自荐信
2013/10/14 职场文书
硕士研究生自我鉴定范文
2013/12/27 职场文书
校园元旦活动总结
2014/07/09 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
作风大整顿心得体会
2014/09/10 职场文书
2014年群众路线党员自我评议
2014/09/24 职场文书
给客户的感谢信
2015/01/21 职场文书
2015年精神文明建设工作总结
2015/04/21 职场文书
pytorch 一行代码查看网络参数总量的实现
2021/05/12 Python
代码解析React中setState同步和异步问题
2021/06/03 Javascript
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis