最近我在搞一个框架，结果被一堆人改得面目全非。我天天盯着那些代码，看得我头都要晕了。不过不得不说，我感觉自己进步还挺大的。我做了一个后台可配置前台查看两个库不同数据范围的东西，感觉还挺满意的。今天就先跟大家分享一下这几天做的一个功能，就是html页面的查找功能。你有没有遇到过在一个网页里找特定内容的困扰？你是不是也常常需要在页面中查找某个关键字？这个问题可不小！毕竟网页内容多得让人眼花缭乱，如果没有一个快速而准确的查找功能，那简直就是大海捞针！好消息来了！我给大家带来了一个超级实用的解决方案！我们可以在查找框内输入字符，然后按下面的上一个下一个按钮。然后神奇的事情发生了——页面会自动把查询区域内匹配到的字符用特殊样式标记出来！这样一来，我们就可以轻松地按顺序浏览匹配字符，并且能够清晰地区分当前匹配的字符和其他匹配字符。你有没有想过，如果没有这个查找功能，我们在海量的网页内容中找到自己需要的信息会是多么困难？简直就是让人抓狂！所以，这个功能对于提高我们的工作效率和阅读体验来说，绝对是必不可少的！不用担心，我已经为大家准备好了解决方案！首先，我们需要先把上一次的查询结果清除掉。然后，根据输入的关键字，使用正则表达式将区域内所有匹配的字符都加上特殊样式。比如，在方法中，我给所有匹配字符都加了一个类名为”result”的标签。同时，我还用一个变量记录下了关键字的值（下次再进入时可以直接比较，如果一样的话说明是要看下一个或者上一个的内容，就不用再用正则表达式匹配了）。另外，我还记录了查询出来的总数和一个标志位。你有没有想过，如果没有这个查找功能，我们在海量的网页内容中找到自己需要的信息会是多么困难？简直就是让人抓狂！所以，这个功能对于提高我们的工作效率和阅读体验来说，绝对是必不可少的！不用担心，我已经为大家准备好了解决方案！首先，我们需要先把上一次的查询结果清除掉。然后，根据输入的关键字，使用正则表达式将区域内所有匹配的字符都加上特殊样式。比如，在方法中，我给所有匹配字符都加了一个类名为”result”的标签。同时，我还用一个变量记录下了关键字的值（下次再进入时可以直接比较，如果一样的话说明是要看下一个或者上一个的内容，就不用再用正则表达式匹配了）。另外，我还记录了查询出来的总数和一个标志位。现在你知道了！有了这个查找功能，我们再也不用在海量网页中苦苦寻找自己需要的信息了。工作效率和阅读体验都会得到大幅提升！所以，如果你还没有尝试过这个功能，赶紧去试一试！相信我，你一定会爱上它的！好了，今天就先给大家分享到这里。希望我的文章对你有所帮助。如果你有任何疑问或者想法，请务必留言给我。我会及时回复你的！同时也非常感谢大家对我们网站的支持。记得点赞和分享！
//搜索功能
var oldKey0 = "";
var index0 = -1;var oldCount0 = 0;
var newflag = 0;
var currentLength = 0;
function wordSearch(flg) {
var key = $("#key").val(); //取key值
if (!key) {
return; //key为空则退出
}
getArray();
focusNext(flg);
}
function focusNext(flg) {
if (newflag == 0) {//如果新搜索,index清零
index0 = 0;
}
if (!flg) {
if (oldCount0 != 0) {//如果还有搜索
if (index0 < oldCount0) {//左边如果没走完，走左边
focusMove(index0);
index0++;
} else if (index0 == oldCount0) {//都走完了
index0 = 0;
focusMove(index0);
index0++;
}
else {
index0 = 0;//没确定
focusMove(index0);
index0++;
}
}
} else {
if (oldCount0 != 0) {//如果还有搜索
if (index0 0) {//左边如果没走完，走左边
index0--;
focusMove(index0);
} else if (index0 == 0) {//都走完了
index0 = oldCount0;
index0--
focusMove(index0);
}
}
}
}
function getArray() {
newflag = 1;
$(".contrast .result").removeClass("res");
var key = $("#key").val(); //取key值
if (!key) {
oldKey0 = "";
return; //key为空则退出
}
if (oldKey0 != key || $(".current").length != currentLength) {
//重置
index0 = 0;
var index = 0;
$(".contrast .result").each(function () {
$(this).replaceWith($(this).html());
});
pos0 = new Array();
if ($(".contrast-wrap").hasClass("current")) {
currentLength = $(".current").length;
$(".current .contrast").each(function () {
$(this).html($(this).html().replace(new RegExp(key, "gm"), "" + key + "")); // 替换
});
} else {
$(".contrast-wrap").addClass('current');
currentLength = $(".current").length;
$(".contrast").each(function () {
$(this).html($(this).html().replace(new RegExp(key, "gm"), "" + key + "")); // 替换
});
}
//$("#key").val(key);
oldKey0 = key;
//$(".contrast .result").each(function () {
// $(this).parents('.contrast-wrap').addClass('current');
// pos0.push($(this).offset().top);
//});
// pos0.push($(".contrast .result:eq(2)").offset().top - $(".contrast .result:eq(2)").parents(".contrast").offset().top);
oldCount0 = $(".contrast .result").length;
newflag = 0;
}
}
function focusMove(index0) {
$(".contrast .result:eq(" + index0 + ")").parents('.contrast-wrap').addClass('current');
$(".contrast .result:eq(" + index0 + ")").addClass("res");
var top = $(".contrast .result:eq(" + index0 + ")").offset().top + $(".contrast .result:eq(" + index0 + ")").parents(".contrast").scrollTop();
var intop = top - $(".contrast .result:eq(" + index0 + ")").parents(".contrast").offset().top;
$(".contrast .result:eq(" + index0 + ")").parents(".contrast").animate({ scrollTop: intop }, 200);
if ($(".contrast .result:eq(" + index0 + ")").parents(".contrast").scrollTop() == 0) {
$("html, body").animate({ scrollTop: top - 200 }, 200);
} else {
$("html, body").animate({ scrollTop: $(".contrast .result:eq(" + index0 + ")").parents(".contrast").offset().top - 200 }, 200);
}
}
$('#key').change(function () {
if ($('#key').val() == "") {
index0 = 0;
$(".contrast .result").each(function () {
$(this).replaceWith($(this).html());
});
oldKey0 = "";
}
});
评论0