html页面的查找功能,科技常识：html页面中完成查找功能

今天小编跟大家讲解下有关html页面中完成查找功能 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关html页面中完成查找功能 的相关资料，希望小伙伴们看了有所帮助。

最近在搞一个被很多人改了的框架 天天看代码看的头的晕了 不过感觉进步还挺大的 自己做了一个后台可配置前台查看两个库不同数据范围的东西 还挺满意 那天拿出来分享一下 今天先说一个这几天做的功能 就是html页面的查找功能。

这个功能主要是实现在查找框内输入字符 之后按后面的上一个下一个按钮 会自动把查询区域内的匹配字符用特殊的样式标记 之后可以继续按上一个下一个按钮把按照顺序浏览匹配字符 并把当前匹配的字符用另一种样式与其他匹配字符加以区别。

前台显示大概是这个样子：

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) {

<