js正文内容高亮效果的实现方法
//高亮显示搜索到的关键字
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>");
}
相关推荐
-
js图片翻书效果代码分享
这是一款基于javascript实现图片翻书效果代码,图片可以从左右两个方向进行切换,用户还可以自定义对应图片的标题与文字说明,是一款非常实用的图片特效源码. 七夕情人节也可以是表白的神器,放一些回忆的照片,还可以永久保存,是不是很有心意,推荐给大家,有需要的小伙伴可以学习学习. 运行效果图: 大家可以先运行一下 -------------------------------------效果运行----------------------------------------- 为大家分享的
-
JS实现图片高亮展示效果实例
本文实例讲述了JS实现图片高亮展示效果的方法.分享给大家供大家参考,具体如下: 昨天朋友让我帮着做个图片高亮展示的效果,虽然不难,不过满有创意的: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w
-
JS+CSS实现表格高亮的方法
本文实例讲述了JS+CSS实现表格高亮的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript+CSS实现表格高亮的功能,实际上类似于隔行换色的效果,说法不同而已,只不过本效果是在鼠标移上时触发,移出结束. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tran
-
js鼠标点击图片切换效果实现代码
本文实例讲述了js鼠标点击图片切换效果实现代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: html代码: <div id="menuWrapper" class="menuWrapper bg1"> <ul class="menu" id="menu"> <li class="bg1" style="background-position:
-
js 全兼容可高亮二级缓冲折叠菜单
在后台或OA系统中最常用到的布局往往是一个全屏布局,一般都是上中下三行两列布局,页头.页脚.左侧菜单加一个右侧ifame框架页.所以那种带折叠的二级菜单是会经常使用到的,本例便是实现这样一种比较通用的全兼容可高亮二级缓冲折叠菜单. 特点: 全兼容,浏览器测试:IE5.5.IE6.IE7.IE8.FF3.0.谷歌.Safari 4.0.Opera9.0. Html结构优雅简洁,无多余标签,利于程序循环输出. 样式与结构分离,你可以在样式表中修改不同的风格. 当前选中项高亮状态,一级菜单和二级菜单都
-
js鼠标点击图片切换效果代码分享
本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不断切换效果. 运行效果图: -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js鼠标点击图片切换效果代码如下 <hea
-
用JS将搜索的关键字高亮显示实现代码
用JS让文章内容指定的关键字加亮 是这样的.. 现在有这些关键字:美容,生活,购物当在文章里头出现这些关键字,就把它加亮显示.. 文章是生成静态页面的,而这些关键字是能随时更新的,所以我想用JS来实现...不知道怎样来实现这样的功能啊?特此求助 复制代码 代码如下: <script language="JavaScript">function highlight(key) { var key = key.split('|'); for (var i=0; i<key.
-
js带缩略图的图片轮播效果代码分享
本文实例讲述了js带缩略图的图片轮播效果.分享给大家供大家参考.具体如下: 这是一款基于javaScript实现带缩略图的图片轮播特效代码,实现过程很简单. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 在head区域引入CSS样式: <link href="css/jb51.net.css" rel="stylesheet" type=&q
-
JS实现3D图片旋转展示效果代码
本文实例讲述了JS实现3D图片旋转展示效果代码.分享给大家供大家参考.具体如下: 这是一段JavaScript代码,围绕成3D模型样式的JavaScript图片旋转展示代码,这里为了演示方便,将图片替换成了数字,预留出了图片的位置,这样速度快些,会HTML的朋友都知道用时候该怎么做.本图片旋转需要手功控制,每点击一下,图片旋转一次,很方便. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-3d-pic-scroll-show-style-c
-
js淡入淡出的图片轮播效果代码分享
本文实例讲述了淡入淡出的js图片轮播效果代码.分享给大家供大家参考.具体如下: 运行效果图:----------------------查看效果----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js图片轮播效果代码如下 <html> <head> <title>js图片轮播效果代码</title> <style type="text/css"> table i
-
js钢琴按钮波浪式图片排列效果代码分享
本文实例讲述了js钢琴按钮波浪式图片排列效果.分享给大家供大家参考.具体如下: 这是一款基于javascript实现的钢琴按钮波浪式图片排列效果,鼠标在图片列表上移动,当前图片高亮显示,以此为根基点,周围的图片逐渐变小,所以有种手指划过钢琴键盘的感觉. 运行效果图: -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 注意:图片的alt属性不能
-
js 玩转正则表达式之语法高亮
学了几天正则,差不多该总结整理写成果了,之前就想写语法高亮匹配来着,不过水平不够,看着例子都不理解. 那么我们来分析下两位大神 次碳酸钴 和 Barret Lee 语法高亮实现. 先说 Barret Lee 的这篇 <几个小例子教你如何实现正则表达式highlight高亮> 之前看的时候只觉的神奇,特别是下面那个一步一步分开匹配的例子,更是霸气测漏,不过作者也说了,分开只是为了演示方便,可以很直观的看到这一步匹配了什么,不然一步到位匹配完成,你都不知道发生了什么就处理完毕了.来看下他的正则 复
随机推荐
- swift where与匹配模式的实例详解
- js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
- C语言中数组的一些基本知识小结
- iOS如何实现强制转屏、强制横屏和强制竖屏的实例代码
- jsp实现checkbox的ajax传值实例
- PHP生成plist数据的方法
- Node.js包管理器Yarn的入门介绍与安装
- Ajax的使用四大步骤
- Ruby中使用设计模式中的简单工厂模式和工厂方法模式
- T-SQL 查询语句的执行顺序解析
- javaweb图书商城设计之用户模块(1)
- 锋利的jQuery jQuery中的DOM操作
- 基于NodeJS的前后端分离的思考与实践(二)模版探索
- C#使用Streamwriter打开文件的方法
- C++简单实现的全排列算法示例
- 浅谈Android中多线程切换的几种方法
- Python 内置函数进制转换的用法(十进制转二进制、八进制、十六进制)
- IntelliJ IDEA打开多个Maven的module且相互调用代码的方法
- 利用python实现对web服务器的目录探测的方法
- Spring 跨域配置请求详解