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]);//跳转到指定位置
}
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！