html页面用js中实现查找功能

样式演示：

代码演示：

html

 div >
script
 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 = 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 = $( #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++) + >
接下来记一下实现原理：
首先先把上一次的查询结果清除掉，然后根据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中实现查找功能的详细内容，html教程        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。