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的ajax基础上的超强GridView展示
Sep 18 Javascript
namespace.js Javascript的命名空间库
Oct 11 Javascript
JQuery结合CSS操作打印样式的方法
Dec 24 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
Aug 22 Javascript
JavaScript动态修改弹出窗口大小的方法
Apr 06 Javascript
jquery使用经验小结
May 20 Javascript
javascript下使用Promise封装FileReader
Feb 19 Javascript
JS组件系列之JS组件封装过程详解
Apr 28 Javascript
详解 vue.js用法和特性
Oct 15 Javascript
详解Angular中通过$location获取地址栏的参数
Aug 02 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
Jul 18 Javascript
JavaScript实现网页动态生成表格
Nov 25 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
用windows下编译过的eAccelerator for PHP 5.1.6实现php加速的使用方法
2007/09/30 PHP
php设计模式  Command(命令模式)
2011/06/17 PHP
PHP实现链式操作的核心思想
2015/06/23 PHP
PHP实现图片不变型裁剪及图片按比例裁剪的方法
2016/01/14 PHP
jquery div拖动效果示例代码
2013/12/08 Javascript
node.js中的buffer.fill方法使用说明
2014/12/14 Javascript
超级简单实现JavaScript MVC 样式框架
2015/03/24 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
2015/11/03 Javascript
jquery插件jquery.confirm弹出确认消息
2015/12/22 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
2017/04/04 Javascript
Vue.js手风琴菜单组件开发实例
2017/05/16 Javascript
详解Vue 2.0封装axios笔记
2017/06/22 Javascript
使用vs code开发Nodejs程序的使用方法
2017/09/21 NodeJs
解决在Bootstrap模糊框中使用WebUploader的问题
2018/03/22 Javascript
手把手教你vue-cli单页到多页应用的方法
2018/05/31 Javascript
Vue.js 2.x之组件的定义和注册图文详解
2018/06/19 Javascript
Vue.js 十五分钟入门图文教程
2018/09/12 Javascript
基于vue-draggable 实现三级拖动排序效果
2020/01/10 Javascript
[02:48]DOTA2英雄基础教程 暗夜魔王
2013/12/12 DOTA
[01:09:40]Newbee vs Pain 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python下载文件时显示下载进度的方法
2015/04/02 Python
Python中线程编程之threading模块的使用详解
2015/06/23 Python
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
selenium3+python3环境搭建教程图解
2018/12/07 Python
python自动分箱,计算woe,iv的实例代码
2019/11/22 Python
python保留小数位的三种实现方法
2020/01/07 Python
完美解决keras 读取多个hdf5文件进行训练的问题
2020/07/01 Python
在 Windows 下搭建高效的 django 开发环境的详细教程
2020/07/27 Python
网易微博Web App用HTML5开发的过程介绍
2012/06/13 HTML / CSS
英国奢侈品概念店:Base Blu
2019/05/16 全球购物
启动一个线程是用run()还是start()
2016/12/25 面试题
工作个人的自我评价
2014/01/14 职场文书
党员对照检查材料
2014/09/22 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书
pytest实现多进程与多线程运行超好用的插件
2022/07/15 Python