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 相关文章推荐
表格 隔行换色升级版
Nov 07 Javascript
浅谈JavaScript Array对象
Dec 29 Javascript
Javascript基础教程之变量
Jan 18 Javascript
理解JavaScript的变量的入门教程
Jul 07 Javascript
分享一个插件实现水珠自动下落效果
Jun 01 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
Jun 06 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
Aug 18 Javascript
微信小程序之蓝牙的链接
Sep 26 Javascript
Angular ng-animate和ng-cookies用法详解
Apr 18 Javascript
代码整洁之道(重构)
Oct 25 Javascript
小程序指纹验证的实现代码
Dec 04 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
Apr 29 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可逆加密/解密函数分享
2012/09/25 PHP
php实现中文转数字
2016/02/18 PHP
JavaScript 监听textarea中按键事件
2009/10/08 Javascript
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
JavaScript类和继承 prototype属性
2010/09/03 Javascript
对xmlHttp对象的理解
2011/01/17 Javascript
鼠标事件延时切换插件
2011/03/12 Javascript
浅析jquery某一元素重复绑定的问题
2014/01/03 Javascript
一个JS函数搞定网页标题(title)闪动效果
2014/05/13 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
2017/04/07 Javascript
基于jQuery实现的单行公告活动轮播效果
2017/08/23 jQuery
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
2017/12/19 Javascript
vue+webpack实现异步组件加载的方法
2018/02/03 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
2020/03/09 Javascript
token 机制和实现方式
2020/12/15 Javascript
python实现图片变亮或者变暗的方法
2015/06/01 Python
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
win与linux系统中python requests 安装
2016/12/04 Python
Django自定义认证方式用法示例
2017/06/23 Python
浅谈Python对内存的使用(深浅拷贝)
2018/01/17 Python
django中ORM模型常用的字段的使用方法
2019/03/05 Python
python中open函数的基本用法示例
2019/09/07 Python
python selenium 执行完毕关闭chromedriver进程示例
2019/11/15 Python
Python中私有属性的定义方式
2020/03/05 Python
pandas.DataFrame.drop_duplicates 用法介绍
2020/07/06 Python
Python获取android设备cpu和内存占用情况
2020/11/15 Python
法国创作个性化T恤衫和其他定制产品平台:Tostadora
2018/04/08 全球购物
ALDO加拿大官网:加拿大女鞋品牌
2018/12/22 全球购物
一些.net面试题
2014/10/06 面试题
导游个人求职信范文
2014/03/23 职场文书
教师考核评语
2014/04/28 职场文书
老公给老婆的保证书
2014/04/28 职场文书
法院干警四风问题个人对照检查材料思想汇报
2014/10/07 职场文书
自主招生英文自荐信
2015/03/25 职场文书
Python数据分析之绘图和可视化详解
2021/06/02 Python