今天先说一个这几天做的功能，就是html页面的查找功能。 这个功能主要是实现在html查找框内输入字符，之后按后面的上一个下一个按钮，会自动把查询区域内的匹配字符用特殊的样式标记，之后可以继续按上一个下一个按钮把按照顺序浏览匹配字符，并把当前匹配的字符用另一种样式与其他匹配字符加以区别。付有html代码哦！
样式演示：
![@WG(NDK33XF7CN7R~]85ZI5.png](https://www.chuangxiangniao.com/wp-content/uploads/2025/12/1511746473664842.png "1511746473664842.png")
代码演示：
html
script
立即学习“前端免费学习笔记（深入）”；
//搜索功能 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 = ""; } });
接下来记一下实现原理：
首先先把上一次的查询结果清除掉，然后根据key的值，用正则表达式把区域内所有匹配的字符全都加上特殊的样式，比如方法中就全部加了一个类名为result的span标签，用odKey0变量记录key的值（下次再进入先比较如果一样的话说明是要看下一个或者上一个的内容，就不用在进入用正则表达式匹配了），oldCount0记录总共查询出来的个数，newflag置0（如果不是初次查询newflag为1）。
接着进入getNext方法，flg表示用户按下的是上一个还是下一个按钮，用index0记录当前查看的是哪一个匹配字符，与oldCount0比较，确定是递增或递减还是置0（如果大于oldCount0或者小于0，就要重新开始）。
focusMove方法就是使页面定位到当前元素的操作。
相关推荐：
HTML怎么实现数字焦点图轮播代码
html里怎么插入图片
HTML里DIV相互重叠怎么办
HTML里怎么使用margin 0 auto
以上就是html页面用js中实现查找功能的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1545284.html
微信扫一扫 
支付宝扫一扫 
