本文为整理博客，仿浏览器做的一个html本地内容搜索并标记指向搜索文本
- JavaScript
- jquery
- css
JavaScript Code：
var oldKey0 = ""; var index0 = -1; var oldCount0 = 0; var newflag = 0; var currentLength = 0; function wordSearch(flg) { var key = $("#search_key").val(); //取key值 if (!key) { return; //key为空则退出 } console.log("key：" + 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 <= oldCount0 && index0 > 0) {//左边如果没走完，走左边 index0--; focusMove(index0); } else if (index0 == 0) {//都走完了 index0 = oldCount0; index0-- focusMove(index0); } } } } function getArray() { newflag = 1; $(".contrast .result").removeClass("res"); var key = $("#search_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"), "<span id='result" + (index++) + "' class='result'>" + key + "</span>")); // 替换 }); } else { $(".contrast-wrap").addClass('current'); currentLength = $(".current").length; $(".contrast").each(function () { $(this).html($(this).html().replace(new RegExp(key, "gm"), "<span id='result" + (index++) + "' class='result'>" + key + "</span>")); // 替换 }); } //$("#search_key").val(key); oldKey0 = key; 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); } } $('#search_key').change(function () { if ($('#search_key').val() == "") { index0 = 0; $(".contrast .result").each(function () { $(this).replaceWith($(this).html()); }); oldKey0 = ""; } });Html Code：
代码块语法遵循标准markdown代码，例如：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <title>页面内容搜索</title> <style> .search { position: relative; width: 78%; margin: 10px auto; padding-left: 3.4em; font-size: 14px;} .search:after{ clear:both;content:'.'; display:block;clear:both;/*清除全部样式*/ height:0; visibility:hidden; overflow:hidden;} .label_t { position: absolute; top: 50%; left: 0; -webkit-transform: translate(0,-50%); -moz-transform: translate(0,-50%); -ms-transform: translate(0,-50%); -o-transform: translate(0,-50%); transform: translate(0,-50%);} .search_t { float: left; width: 68%; height: 38px; padding-left: 8px; padding-right: 8px; font-size: 14px; border: 1px solid #cdcdcd; border-top-left-radius: 3px; border-bottom-left-radius: 3px;} .search_b { float: left; width: 16%; height: 38px; color: #7891ab; font-size: 15px; font-weight: bold; border: none; border: 1px solid #bbb; border-left: none; background-color: #fff;} .search_b + .search_b { border-top-right-radius: 3px; border-bottom-right-radius: 3px;} .search_b:active { background-color: #f8f8f8;} .res {background-color: yellow;} </style> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js" type="text/javascript"></script> <script src="jquery_search.js" type="text/javascript" rel="stylesheet"></script> </head> <body> <div class="search"> <label class="label_t">查找：</label> <input class="search_t" type="text" id="search_key" placeholder="关键词" value=""> <input class="search_b" type="button" onclick="wordSearch(1);" title="pre" value="∧"> <input class="search_b" type="button" onclick="wordSearch();" title="next" value="∨"> </div> <div class="contrast-wrap"> <div class="text contrast" id="content"> <p style="text-align:left;"> <span style="font-size:14px;"><span style="font-size:12px;"></span><span style="font-size:12px;">测试内容</span><span style="font-size:12px;">xxxxxx测试xxxxxxxxxxxx</span></span> </p> <p style="text-align:left;"> <span style="font-size:14px;"><span style="font-size:12px;"></span><span style="font-size:12px;">测试内容</span><span style="font-size:12px;">xxxxxxxxxx内容xxxxxxxxx</span></span> </p> <p style="text-align:left;"> <span style="font-size:14px;"><span style="font-size:12px;"></span><span style="font-size:12px;">内容</span><span style="font-size:12px;">xxxxxxxxxxxxxxxxxxxxxxx</span></span> </p> <p style="text-align:left;"> <span style="font-size:14px;"><span style="font-size:12px;"></span><span style="font-size:12px;">内容</span><span style="font-size:12px;">xxxxxxxxhelloxxxxxxxxxxxxx</span></span> </p> <p style="text-align:left;"> <span style="font-size:14px;"><span style="font-size:12px;"></span><span style="font-size:12px;">内容</span><span style="font-size:12px;">xxxxxxxxxxxxxxxxxxxxxxx</span></span> </p> <div> </div> </body> </html>- 首先先把上一次的查询结果清除掉。
- 根据key的值，用正则表达式把区域内所有匹配的字符全都加上特殊的样式，比如方法中就全部加了一个类名为result的span标签，用odKey0变量记录key的值（下次再进入先比较如果一样的话说明是要看下一个或者上一个的内容，就不用在进入用正则表达式匹配了）。
oldCount0记录总共查询出来的个数，newflag置0（如果不是初次查询newflag为1）。
进入getNext方法，flg表示用户按下的是上一个还是下一个按钮，用index0记录当前查看的是哪一个匹配字符，与oldCount0比较，确定是递增或递减还是置0（如果大于oldCount0或者小于0，就要重新开始）。
focusMove方法就是使页面定位到当前元素的操作。
eq() 选择器：选择器选取带有指定 index 值的元素。例如：$(“.contrast .result:eq(1)”)，就是选择类名contrast元素中的第二个类名为result的元素。
parents()方法：元素的所有父元素。$(“p”).parents(‘.contrast-wrap’)，p元素所有类名为contrast-wrap的元素。
replace()方法：用指定的html内容替换被选元素，注意是把被选元素的元素也替换掉。
offset()方法：返回或设置匹配元素相对于文档的偏移（位置）。
scrollTop()方法：返回或设置匹配元素的滚动条的垂直位置。
以上就是本文的全部内容，希望对大家的学习有所帮助.
文章来源: 仿浏览器html本地搜索