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. ...
随机推荐
- Spring @Conditional注解的使用
Spring Boot的强大之处在于使用了Spring 4框架的新特性:@Conditional注释,此注释使得只有在特定条件满足时才启用一些配置. 下面来介绍如何使用Condition 首先写一个类 ...
- PAT1039: Course List for Student
1039. Course List for Student (25) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Y ...
- PowerDesigner如何将设计的表更新到数据库中
前言: 软件开发的过程中,将设计的表更新到数据库中是一件繁琐的事情,使用好工具,能够事半功倍. 环境介绍:Oracle 11g x64 前期准备: 1.PowerDesigner工具(本人是32位的) ...
- redis与python交互
import redis #连接 r=redis.StrictRedis(host="localhost",port=6379,password="sunck" ...
- 如何查找Linux服务器上JDK安装路径?
成功远程到你要部署软件的Linux服务器上.这是第一步. 查看JDK版本:java -version 查看java执行路径:which java 查看JAVA_HOME路径:echo $JAVA_HO ...
- config.go
package blog4go import ( "encoding/xml" "errors" "io/ioutil" "os& ...
- lease.go
package ) type:]...) :]...) )*time.Second) ) go func() { select { case <-stop ...
- vue不是内部或外部命令解决验证方案
一.前提 1.该教程是在你已经安装配置好node.js和express情况下 2.你已经完成了vue和vue-cli的全局安装 3.完成以上2步后,使用vue指令,会显示"vue不是内部或外 ...
- STM32基于固件库新建MDK工程模板(精简版)
上个博文理论讲解的东西太多,太复杂,这里把所有步骤全部贴出 1.新建一个工程文件夹LED 2.LED文件夹下建立如下文件夹 3.Project –>New Uvision Project 到US ...
- String去重方法
思路:利用集合的contains方法将某个字符串中的集合中没有的单个字符添加到集合中,然后再将集合中每个元素做拼接 @Test public void aa5(){ String aa="a ...