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中的面向对象介绍
Jun 30 Javascript
js如何判断不同系统的浏览器类型
Oct 28 Javascript
js截取固定长度的中英文字符的简单实例
Nov 22 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
Dec 24 Javascript
JavaScript初学者必看“new”
Jun 12 Javascript
Bootstrap 模态框(Modal)带参数传值实例
Aug 20 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
实例详解vue中的$root和$parent
Apr 29 Javascript
laypage+SpringMVC实现后端分页
Jul 27 Javascript
JQuery省市联动效果实现过程详解
May 08 jQuery
vue单应用在ios系统中实现微信分享功能操作
Sep 07 Javascript
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
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侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
php重定向的三种方法分享
2012/02/22 PHP
php生成EAN_13标准条形码实例
2013/11/13 PHP
Laravel框架学习笔记(二)项目实战之模型(Models)
2014/10/15 PHP
smarty模板引擎中自定义函数的方法
2015/01/22 PHP
PHP中empty,isset,is_null用法和区别
2017/02/19 PHP
在javascript将NodeList作为Array数组处理的方法
2010/07/09 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
2011/02/23 Javascript
最新28个很棒的jQuery 教程
2011/05/28 Javascript
完美解决IE低版本不支持call与apply的问题
2013/12/05 Javascript
js点击button按钮跳转到另一个新页面
2014/10/10 Javascript
JavaScript针对网页节点的增删改查用法实例
2015/02/02 Javascript
javascript实现方法调用与方法触发小结
2016/03/26 Javascript
jQuery的ajax和遍历数组json实例代码
2016/08/01 Javascript
JS制作图形验证码实现代码
2020/10/19 Javascript
ES6新特性之函数的扩展实例详解
2017/04/01 Javascript
xmlplus组件设计系列之图标(ICON)(1)
2017/05/05 Javascript
jQuery简单绑定单个事件的方法示例
2017/06/10 jQuery
在一般处理程序(ashx)中弹出js提示语
2017/08/16 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
2017/09/30 Javascript
vue自动化表单实例分析
2018/05/06 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
2018/12/10 jQuery
微信域名检测接口调用演示步骤(含PHP、Python)
2019/12/08 Javascript
[12:51]71泪洒现场!是DOTA2让经典重现
2014/03/24 DOTA
用opencv给图片换背景色的示例代码
2020/07/08 Python
使用CSS3的font-face字体嵌入样式的方法讲解
2016/05/13 HTML / CSS
Auchan Direct波兰:欧尚在线杂货店
2016/10/19 全球购物
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
苹果音乐订阅:Apple Music
2018/08/02 全球购物
台湾专柜女包:KINAZ
2019/12/26 全球购物
乔迁之喜主持词
2014/03/27 职场文书
房屋公证委托书
2014/04/03 职场文书
自我评价优缺点范文
2015/03/11 职场文书
中学总务处工作总结
2015/08/12 职场文书
CSS3新特性详解(五):多列columns column-count和flex布局
2021/04/30 HTML / CSS
Python各协议下socket黏包问题原理
2022/04/12 Python