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对checkbox操作 (循环获取)
May 20 Javascript
Jquery实现的tab效果可以指定默认显示第几页
Oct 16 Javascript
分享一则JavaScript滚动条插件源码
Mar 03 Javascript
jQuery实现的简洁下拉菜单导航效果代码
Aug 26 Javascript
JS排序之冒泡排序详解
Apr 08 Javascript
javascript实现二叉树遍历的代码
Jun 08 Javascript
js实现多张图片延迟加载效果
Jul 17 Javascript
vue.js框架实现表单排序和分页效果
Aug 09 Javascript
ES6使用export和import实现模块化的方法
Sep 10 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
解决使用layui的时候form表单中的select等不能渲染的问题
Sep 18 Javascript
VUE+node(express)实现前后端分离
Oct 13 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
4.与数据库的连接
2006/10/09 PHP
使用Linux五年积累的一些经验技巧
2013/06/20 PHP
php操作csv文件代码实例汇总
2014/09/22 PHP
var与Javascript变量隐式声明
2009/09/17 Javascript
Node.js实现简单聊天服务器
2014/06/20 Javascript
Jquery简单实现GridView行高亮的方法
2015/06/15 Javascript
11种ASP连接数据库的方法
2015/09/18 Javascript
Bootstrap表格和栅格分页实例详解
2016/05/20 Javascript
浅析ES6的八进制与二进制整数字面量
2016/08/30 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
2016/11/07 Javascript
详解jQuery插件开发方式
2016/11/22 Javascript
js匿名函数使用&amp;传参(实例)
2017/09/08 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
2017/09/11 Javascript
Python使用cx_Oracle调用Oracle存储过程的方法示例
2017/10/07 Python
机器学习python实战之手写数字识别
2017/11/01 Python
python中logging包的使用总结
2018/02/28 Python
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
flask实现验证码并验证功能
2019/12/05 Python
python单例设计模式实现解析
2020/01/07 Python
Python爬虫库requests获取响应内容、响应状态码、响应头
2020/01/25 Python
浅谈Pycharm最有必要改的几个默认设置项
2020/02/14 Python
Nike法国官方网站:Nike.com FR
2018/07/22 全球购物
JAKO-O德国野酷台湾站:德国首屈一指的婴幼童用品品牌
2019/01/14 全球购物
法国足球商店:Footcenter
2019/07/06 全球购物
伊莱克斯阿根廷网上商店:Tienda Electrolux
2021/03/08 全球购物
同事吵架检讨书
2014/02/05 职场文书
QQ空间主人寄语大全
2014/04/12 职场文书
销售员试用期自我评价
2014/09/15 职场文书
党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
收费员岗位职责
2015/02/14 职场文书
销售员岗位职责范本
2015/04/11 职场文书
2016年母亲节寄语
2015/12/04 职场文书
2016预备党员培训心得体会
2016/01/08 职场文书
利用html+css实现菜单栏缓慢下拉效果的示例代码
2021/03/30 HTML / CSS
纯CSS实现hover图片pop-out弹出效果的实例代码
2021/04/16 HTML / CSS