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 jQuery插件练习
Dec 24 Javascript
js 获取浏览器高度和宽度值(多浏览器)
Sep 02 Javascript
javascript 上下banner替换具体实现
Nov 14 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
Jan 07 Javascript
js兼容火狐获取图片宽和高的方法
May 21 Javascript
jQuery is not defined 错误原因与解决方法小结
Mar 19 Javascript
vue引入js数字小键盘的实现代码
May 14 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
Aug 10 Javascript
js中apply()和call()的区别与用法实例分析
Aug 14 Javascript
jsonp跨域及实现百度首页联想功能的方法
Aug 30 Javascript
vue-cli2 构建速度优化的实现方法
Jan 08 Javascript
JavaScript圣杯布局与双飞翼布局实现案例详解
Aug 05 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/11/25 PHP
php 判断服务器操作系统的类型
2014/02/17 PHP
Yii结合CKEditor实现图片上传功能
2014/06/13 PHP
php实现短信发送代码
2015/07/05 PHP
php支付宝APP支付功能
2020/07/29 PHP
重定向实现代码
2006/11/20 Javascript
使用javascript访问XML数据的实例
2006/12/27 Javascript
jQuery chili图片远处放大插件
2009/11/30 Javascript
Javascript 面向对象之重载
2010/05/04 Javascript
Javascript delete 引用类型对象
2013/11/01 Javascript
如何正确使用Nodejs 的 c++ module 链接到 OpenSSL
2014/08/03 NodeJs
JS控制表单提交的方法
2015/07/09 Javascript
JS实现弹性菜单效果代码
2015/09/07 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
2015/12/04 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
2016/09/04 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
2017/08/24 jQuery
手机注册发送验证码倒计时的简单实例
2017/11/15 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
2018/01/25 Javascript
通过cordova将vue项目打包为webapp的方法
2019/02/02 Javascript
送你43道JS面试题(收藏)
2019/06/17 Javascript
es6中比较有用的7个技巧小结
2019/07/12 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
2019/11/12 Javascript
从零使用TypeScript开发项目打包发布到npm
2020/02/14 Javascript
通过5个知识点轻松搞定Python的作用域
2016/09/09 Python
Python实现Smtplib发送带有各种附件的邮件实例
2017/06/05 Python
Python集合操作方法详解
2020/02/09 Python
python3使用Pillow、tesseract-ocr与pytesseract模块的图片识别的方法
2020/02/26 Python
如何在mac下配置python虚拟环境
2020/07/06 Python
删除pycharm鼠标右键快捷键打开项目的操作
2021/01/16 Python
canvas离屏技术与放大镜实现代码示例
2018/08/31 HTML / CSS
通信生自我鉴定
2014/01/18 职场文书
亲属关系公证书样本
2015/01/23 职场文书
学雷锋日活动总结
2015/02/06 职场文书
解决Tkinter中button按钮未按却主动执行command函数的问题
2021/05/23 Python
MySQL数据库必备之条件查询语句
2021/10/15 MySQL
十大必看国产动漫排名,魁拔上线,第二曾在日本播出
2022/03/18 国漫