js实现在当前页面搜索高亮显示字的方法
在html页面上,有时候会遇到一些检索高亮显示的问题,具体用js是实现的方式,代码展示。
Jsp页面设置方式
<li class="pull-left" id="search_box">
<input type="text" id="searchstr" name="searchstr" placeholder="请输入要查找的内容">
<%-- <input
class="textbox" id="searchstr" type="text"
size="10" name="searchstr" /> --%>
<%-- <input
class="sbttn" id="search_btn" type="button"
value="页内查找" />--%>
<button id="search_btn" type="button" >搜索</button></li>
CSS样式控制
<link rel="stylesheet" type="text/css" href="../css/main.css" />
<style type="text/css">
.demo{width:800px; margin:40px auto 0 auto; min-height:250px; font-size:14px}
.demo p{line-height:22px}
.demo p strong{color:#f30}
.highlight { background: yellow; }
.prelight { background: blue; color: white; }
#tip { background: #FFFFCC; border: 1px solid #999; width: 200px; text-align: center; display: none; font-size: 12px; }
#search_box { text-align:right }
#search_btn { background-color:#0a64ad; border: 0px; color: white;margin-left:-5px; }
#searchstr { font-size: 14px; height: 30px; }
</style>
js实现
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
(function($) {
$.fn.fixDiv = function(options) {
var defaultVal = {
top: 10
};
var obj = $.extend(defaultVal, options);
$this = this;
var _top = $this.offset().top;
var _left = $this.offset().left;
$(window).scroll(function() {
var _currentTop = $this.offset().top;
var _scrollTop = $(document).scrollTop();
if (_scrollTop > _top) {
$this.offset({
top: _scrollTop + obj.top,
left: _left
});
} else {
$this.offset({
top: _top,
left: _left
});
}
});
return $this;
};
})(jQuery);
$(function(){
$("#search_box").fixDiv({ top: 0 });
$('#search_btn').click(highlight);//点击search时,执行highlight函数;
$('#searchstr').keydown(function (e) {
var key = e.which;
if (key == 13) highlight();
}) var i = 0;
var sCurText;
function highlight(){
clearSelection();//先清空一下上次高亮显示的内容; var flag = 0;
var bStart = true; $('#tip').text('');
$('#tip').hide();
var searchText = $('#searchstr').val();
var _searchTop = $('#searchstr').offset().top+30;
var _searchLeft = $('#searchstr').offset().left;
if($.trim(searchText)=="" || $.trim(searchText)=='.'){
//alert(123);
showTips("请输入查找内容",_searchTop,3,_searchLeft);
return;
} var searchText = $('#searchstr').val();//获取你输入的关键字;
var regExp = new RegExp(searchText, 'g');//创建正则表达式,g表示全局的,如果不用g,则查找到第一个就不会继续向下查找了;
var content = $("#lawcontent").text();
if (!regExp.test(content)) {
showTips("没有找到要查找的内容",_searchTop,3,_searchLeft);
return;
} else {
if (sCurText != searchText) {
i = 0;
sCurText = searchText;
}
} $('p').each(function(){
var html = $(this).html();
var newHtml = html.replace(regExp, '<span class="highlight">'+searchText+'</span>');//将找到的关键字替换,加上highlight属性; $(this).html(newHtml);//更新;
flag = 1;
}); if (flag == 1) {
if ($(".highlight").size() > 1) {
var _top = $(".highlight").eq(i).offset().top+$(".highlight").eq(i).height();
var _tip = $(".highlight").eq(i).parent().find("strong").text();
if(_tip=="") _tip = $(".highlight").eq(i).parent().parent().find("strong").text();
var _left = $(".highlight").eq(i).offset().left;
var _tipWidth = $("#tip").width();
if (_left > $(document).width() - _tipWidth) {
_left = _left - _tipWidth;
}
$("#tip").html(_tip).show();
$("#tip").offset({ top: _top, left: _left });
$("#search_btn").val("查找下一个");
}else{
var _top = $(".highlight").offset().top+$(".highlight").height();
var _tip = $(".highlight").parent().find("strong").text();
var _left = $(".highlight").offset().left;
$('#tip').show();
$("#tip").html(_tip).offset({ top: _top, left: _left });
}
$("html, body").animate({ scrollTop: _top - 50 });
i++;
if (i > $(".highlight").size() - 1) {
i = 0;
}
}
}
function clearSelection(){
$('p').each(function(){
//找到所有highlight属性的元素;
$(this).find('.highlight').each(function(){
$(this).replaceWith($(this).html());//将他们的属性去掉;
});
});
} //mask
var tipsDiv = '<div class="tipsClass"></div>';
$( 'body' ).append( tipsDiv );
function showTips( tips, height, time,left ){
var windowWidth = document.documentElement.clientWidth;
$('.tipsClass').text(tips);
$( 'div.tipsClass' ).css({
'top' : height + 'px',
'left' :left + 'px',
'position' : 'absolute',
'padding' : '8px 6px',
'background': '#000000',
'font-size' : 14 + 'px',
'font-weight': 900,
'margin' : '0 auto',
'text-align': 'center',
'width' : 'auto',
'color' : '#fff',
'border-radius':'2px',
'opacity' : '0.8' ,
'box-shadow':'0px 0px 10px #000',
'-moz-box-shadow':'0px 0px 10px #000',
'-webkit-box-shadow':'0px 0px 10px #000'
}).show();
setTimeout( function(){$( 'div.tipsClass' ).fadeOut();}, ( time * 1000 ) );
}
})
/**/
</script>
js实现在当前页面搜索高亮显示字的方法的更多相关文章
- js灵活打印web页面区域内容的通用方法
我们做网站,经常需要打印页面指定区域的内容,而网上关于这块的说法很多,各种各样的打印控件也不少.但许多打印方案都不怎么好,至少我不喜欢,要么封装复杂,要么难以维护.正好现在的项目也需要用到 ...
- jquery和js的几种页面加载函数的方法以及执行顺序
参考博客:http://www.cnblogs.com/itslives-com/p/4646790.html https://www.cnblogs.com/james641/p/783837 ...
- js中常用framesetiframe页面跳转传参方法实例大全
logf的空间
- IDEA 2018.3.5,修改js文件,html页面不及时更新
问题描述 使用IDEA 开发时,修改js文件,前端页面不能及时更新. 解决方法: 1. IDEA settings--> Compiler --> Build project automa ...
- 原生Js 两种方法实现页面关键字高亮显示
原生Js 两种方法实现页面关键字高亮显示 上网看了看别人写的,不是兼容问题就是代码繁琐,自己琢磨了一下用两种方法都可以实现,各有利弊. 方法一 依靠正则表达式修改 1.获取obj的html2.统一替换 ...
- jquery textSearch实现页面搜索 注意!!!!调用这个插件后,js事件绑定如,on、bind、live delegate全部失效,折腾了我一整天!!!
今天我们介绍的这个插件来着http://www.zhangxinxu.com/wordpress/,张鑫旭的文章写得挺好的,大家有兴趣的多看看. 我们今天的这个插件叫“jquery.textSearc ...
- JS 页面繁简字转换
// 本js用于客户在网站页面选择繁体中文或简体中文显示,默认是正常显示,即简繁体同时显示// 在用户第一次访问网页时,会自动检测客户端语言进行操作并提示.此功能可关闭// 本程序只在UTF8编码下测 ...
- FlexPaper二次开发问题及搜索高亮显示
原文:FlexPaper二次开发问题及搜索高亮显示 最近有个需求,做一个IT知识库,类似于文库,说到文库肯定会用到在线浏览文档了,所有在网上翻阅了一下类似豆丁的在线浏览器插件的资料,将其进行了二次开发 ...
- js/jQuery实现类似百度搜索功能
一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...
随机推荐
- PAT1082:Read Number in Chinese
1082. Read Number in Chinese (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yu ...
- springboot中自定义根路径的配置
Spring boot默认是/ ,这样直接通过http://ip:port/就可以访问到index页面,如果要修改为http://ip:port/path/ 访问的话,那么需要在Application ...
- 优雅的玩PHP多进程
proc_open (PHP 4 >= 4.3.0, PHP 5, PHP 7) proc_open — 执行一个命令,并且打开用来输入/输出的文件指针. 说明¶ resource proc_o ...
- 2101: Bake Off
Description Davy decided to start a weekend market stall where he sells his famous cakes. For the fi ...
- Python random() 函数
描述 random() 方法返回随机生成的一个实数,它在[0,1)范围内. 语法 以下是 random() 方法的语法: import random random.random() 注意:random ...
- CSS实现核辐射警告标志
今天做了下360的前端星计划测试题,碰到一个有趣的css题,实现如下图效果,记得上次也是在360面试的时候碰到一个有趣的css实现宝马logo,不得不说360的面试题还是很有创意的. 我一直努力想用一 ...
- CAN总线的显性电平与隐性电平
读CAN总线的书时,都会涉及到总线电平的问题,CAN总线的电平分为显性电平与隐性电平,这是CAN总线物理层的核心部分,也是总线仲裁的基础.那何为显性,何为隐性呢? 根据孔丙火(微信公众号:孔丙火)的理 ...
- Python数据结构应用4——搜索(search)
Search是数据结构中最基础的应用之一了,在python中,search有一个非常简单的方法如下: 15 in [3,5,4,1,76] False 不过这只是search的一种形式,下面列出多种形 ...
- Java Applet 与Servlet之间的通信
1 Applet对Servlet的访问及参数传递的实现 2.1.1创建URL对象 在JAVA程序中,可以利用如下的形式创建URL对象 URL servletURL = new URL( "h ...
- validatebox相关验证
$(document).ready( function(){ $.extend($.fn.validatebox.defaults.rules, { minLength: { validator: f ...