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 相关文章推荐
JavaScript中null与undefined分析
Jul 25 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
May 11 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
Sep 22 Javascript
如何实现移动端浏览器不显示 pc 端的广告
Oct 15 Javascript
JS运动相关知识点小结(附弹性运动示例)
Jan 08 Javascript
简单封装js的dom查询实例代码
Jul 08 Javascript
解决node.js安装包失败的几种方法
Sep 02 Javascript
Vue项目查看当前使用的elementUI版本的方法
Sep 27 Javascript
解决layui弹框失效的问题
Sep 09 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
Sep 21 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
Sep 02 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
Nov 19 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
3.从实例开始
2006/10/09 PHP
使用PHP实现密保卡功能实现代码&amp;lt;打包下载直接运行&amp;gt;
2011/10/09 PHP
php判断正常访问和外部访问的示例
2014/02/10 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
PHP信号处理机制的操作代码讲解
2019/04/19 PHP
js小技巧--自动隐藏红叉叉
2007/08/13 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
jquery实现侧边弹出的垂直导航
2014/12/09 Javascript
AngularJS directive返回对象属性详解
2016/03/28 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
2016/06/23 Javascript
JavaScript ES6中export、import与export default的用法和区别
2017/03/14 Javascript
nodejs利用ajax实现网页无刷新上传图片实例代码
2017/06/06 NodeJs
jquery与js实现全选功能的区别
2017/06/11 jQuery
基于vue-ssr服务端渲染入门详解
2018/01/08 Javascript
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
2018/09/27 Javascript
VueJS 组件参数名命名与组件属性转化问题
2018/12/03 Javascript
详解Vue前端对axios的封装和使用
2019/04/01 Javascript
基于Express框架使用POST传递Form数据
2019/08/10 Javascript
javascript 对象 与 prototype 原型用法实例分析
2019/11/11 Javascript
vue 返回上一页,页面样式错乱的解决
2019/11/14 Javascript
Python多线程编程(三):threading.Thread类的重要函数和方法
2015/04/05 Python
Python实现复杂对象转JSON的方法示例
2017/06/22 Python
Python实现XML文件解析的示例代码
2018/02/05 Python
Python3爬虫之自动查询天气并实现语音播报
2019/02/21 Python
python 初始化一个定长的数组实例
2019/12/02 Python
Python嵌套函数,作用域与偏函数用法实例分析
2019/12/26 Python
python计算波峰波谷值的方法(极值点)
2020/02/18 Python
python模拟点击网页按钮实现方法
2020/02/25 Python
Python做图像处理及视频音频文件分离和合成功能
2020/11/24 Python
建筑系毕业生自我鉴定
2014/01/24 职场文书
学校地质灾害防治方案
2014/06/10 职场文书
作风转变心得体会
2014/09/02 职场文书
2015年党员个人剖析材料
2014/12/18 职场文书
Windows下使用Nginx+Tomcat做负载均衡的完整步骤
2021/03/31 Servers
React Hook用法示例详解(6个常见hook)
2021/04/28 Javascript