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 相关文章推荐
导入extjs、jquery 文件时$使用冲突问题解决方法
Jan 14 Javascript
javascript框架设计读书笔记之数组的扩展与修复
Dec 02 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
Mar 10 Javascript
JS实现简单的二维矩阵乘积运算
Jan 26 Javascript
JavaScript 正则表达式中global模式的特性
Feb 25 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
Sep 01 Javascript
Angular2学习笔记——详解路由器模型(Router)
Dec 02 Javascript
JavaScript利用正则表达式替换字符串中的内容
Dec 12 Javascript
JS声明式函数与赋值式函数实例分析
Dec 13 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
Jun 22 Javascript
分析JavaScript数组操作难点
Dec 18 Javascript
Vue中父子组件通讯之todolist组件功能开发
May 21 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 选项及相关信息函数库
2006/12/04 PHP
php的正则处理函数总结分析
2008/06/20 PHP
浅析php插件 Simple HTML DOM 用DOM方式处理HTML
2013/07/01 PHP
php数据访问之查询关键字
2016/05/09 PHP
使用laravel根据用户类型来显示或隐藏字段
2019/10/17 PHP
prototype 源码中文说明之 prototype.js
2006/09/22 Javascript
js中生成map对象的方法
2014/01/09 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
2014/10/23 Javascript
详解jquery中$.ajax方法提交表单
2014/11/03 Javascript
javascript制作sql转换为stringBuffer的小工具
2015/04/03 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
2015/12/31 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
使用JavaScript实现弹出层效果的简单实例
2016/05/31 Javascript
使用Node.js搭建静态资源服务详细教程
2017/08/02 Javascript
vue实现简单loading进度条
2018/06/06 Javascript
javascript移动端 电子书 翻页效果实现代码
2019/09/07 Javascript
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
[02:51]2014DOTA2国际邀请赛 IG战队官方纪录片
2014/07/21 DOTA
[00:58]PWL开团时刻DAY5——十人开雾0换5
2020/11/04 DOTA
Python 递归函数详解及实例
2016/12/27 Python
python 通过字符串调用对象属性或方法的实例讲解
2018/04/21 Python
python实现对文件中图片生成带标签的txt文件方法
2018/04/27 Python
TensorFlow基于MNIST数据集实现车牌识别(初步演示版)
2019/08/05 Python
Python中os模块功能与用法详解
2020/02/26 Python
python由已知数组快速生成新数组的方法
2020/04/08 Python
Django 允许局域网中的机器访问你的主机操作
2020/05/13 Python
Python grequests模块使用场景及代码实例
2020/08/10 Python
如何基于Python和Flask编写Prometheus监控
2020/11/25 Python
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
巴西Bo.Bô官方在线商店:经营奢侈品时尚业务
2020/03/16 全球购物
供应链金融服务方案
2014/05/25 职场文书
党的群众路线教育实践活动通讯稿
2014/09/10 职场文书
小学生禁毒教育心得体会
2016/01/15 职场文书
实用干货:敬酒词大全,帮你应付各种场合
2019/11/21 职场文书
Pytorch 中net.train 和 net.eval的使用说明
2021/05/22 Python
JS实现简单的九宫格抽奖
2022/06/28 Javascript