python实现浏览器ctrl+f页面搜索功能_前端页面模拟浏览器搜索功能Ctrl+F实现

.res{color:Red;

}.result{background:yellow;

}

varoldKey= "";varindex= -1;varpos= newArray();//用于记录每个关键词的位置，以方便跳转

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

functionprevious(){

index--;

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

search();

}functionnext(){

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

if(index==oldCount){

index= 0;

}

search();

}functionsearch() {

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

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

if(!key) {

console.log("key为空则退出");

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

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

});

oldKey= "";return;//key为空则退出

}if(oldKey!=key) {

console.log("进入重置方法");//重置

index= 0;

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

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

});

pos= newArray();varregExp= newRegExp(key+'(?!([^)','ig');//正则表达式匹配

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

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

oldKey=key;

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

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

});

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

console.log("oldCount值：",oldCount);

}

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

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

}