博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
java实现文本查找ctrl f功能,JSP页面 CTRL+F 功能实现
阅读量:5223 次
发布时间:2019-06-14

本文共 1453 字,大约阅读时间需要 4 分钟。

--- js 部分

var oldKey = "";

var index = -1;

var pos = new Array();//用于记录每个关键词的位置,以方便跳转

var posy = new Array();//用于记录每个关键词的位置,以方便跳转

var oldCount = 0;//记录搜索到的所有关键词总数

function previous(){

index--;

index = index < 0 ? oldCount - 1 : index;

search();

}

function next(){

index++;

//index = index == oldCount ? 0 : index;

if(index==oldCount){

index = 0 ;

}

search();

}

function search() {

$(".result").removeClass("res");//去除原本的res样式

var key = $("#key").val(); //取key值

if (!key) {

$(".result").each(function () {//恢复原始数据

$(this).replaceWith($(this).html());

});

oldKey = "";

return; //key为空则退出

}

if (oldKey != key) {

//重置

index = 0;

$(".result").each(function () {

$(this).replaceWith($(this).html());

});

pos = new Array();

posy = new Array();

var regExp = new RegExp(key+'(?!([^)', 'ig');//正则表达式匹配

$("body").html($("body").html().replace(regExp, "" + key + "")); // 高亮操作

$("#key").val(key);

oldKey = key;

$(".result").each(function () {

pos.push($(this).offset().top);

posy.push($(this).offset().left);

});

oldCount = $(".result").length;

}

$(".result:eq(" + index + ")").addClass("res");//当前位置关键词改为红色字体

$("body").scrollTop(pos[index]);//跳转到指定位置

window.scrollTo(0,pos[index]-500);

}

---css 部分

.res {

color: Red;

}

.result {

background: yellow;

}

--- JSP 部分

placeholder="查找姓名、网点"

style="width: 100px; text-align: right; font-size: 14px;" />

type="button" value="下一个" οnclick="next()"

style="font-size: 14px;" />

οnclick="previous()" style="font-size: 14px;" />

转载地址:http://olatv.baihongyu.com/

你可能感兴趣的文章
为什么数据库ID不能作为URL中的标识符
查看>>
Mybatis 3.3.0 Log4j配置
查看>>
JavaScript打开窗口与关闭页面操作大全
查看>>
java 接口参数
查看>>
DP:Skiing(POJ 1088)
查看>>
kudu
查看>>
如何得到WAV文件播放的总时间
查看>>
移动端页面兼容性问题解决方案整理(三)
查看>>
c语言以二进制的方式向文件读写一组数据
查看>>
Spring定时器,定时执行(quartz)
查看>>
ASCII码表
查看>>
webstorm使用教程
查看>>
PHP 反射API
查看>>
BZOJ4045 : [Cerc2014] bricks
查看>>
Oracle登陆触发器
查看>>
Git-git提交报错error:RPC failed
查看>>
mysql-mysqlslap执行报错
查看>>
sdn
查看>>
# 2017-2018-1 20155302 课下实践IPC及课上补充
查看>>
java8新特性之Optional类
查看>>