实例:JSFilter
视频锁定
{$ currentTime | date:'mm:ss' $}
{$ timeLeft | date:'mm:ss' $}
本小节提供一个实例,用以展示在实际应用中正则表达式的用途,当然,,一个例子不可能涵盖所有的内容,只是一个最常见的场景。
考虑这样一种情况,我们在 UI 上为用户提供一种快速搜索的能力,使得随着用户的键 入,结果集不断的减少,直到用户找到自己需要的关键字对应的栏目。在这个过程中,用户可以选择是否区分大小写,是否全词匹配,以及高亮一个记录中的所有匹配。
显然,正则表达式可以满足这个需求,我们在这个例子中忽略掉诸如高亮,刷新结果集等部分,来看看正则表达式在实际中的应用:
图 在列表中使用 JSFilter(结果集随用户输入而变化)来看一个代码片段:
this.content.each(function(){
var text = $(this).text();
var pattern = new RegExp(keyword, reopts);
if(pattern.test(text)){
var item = text.replace(pattern, function(t){
return "<span
class=\""+filterOptions.highlight+"\">"+t+"</span>";
});
$(this).html(item).show();
}else{//clear previous search result
$(this).find("span."+filterOptions.highlight).each(function(){ $(this).replaceWith($(this).text());
});
}
});
其中,content 是结果集,是一个集合,其中的每一个项目都可能包含用户输入的关键字,keyword 是用户输入的关键字序列,而 reopts 为正则表达式的选项,可能为(i,g,m),each 是 jQuery 中的遍历集合的方式,非常方便。程序的流程是这样的:
- 进入循环,取得结果集中的一个值作为当前值
- 使用正则表达式对象的test方法进行测试
- 如果测试通过,则高亮标注记录中的关键字
- 否则跳过,进行下一条的检测
遍历完所有的结果集,生成了一个新的,高亮标注的结果集,然后将其呈现给用户。而且可以很好的适应用户的需求,比如是否忽略大小写检查,是否高亮所有,是否全词匹配,如果自行编写程序进行分析,则需要耗费极大的时间和精力。
图 在表格中使用 JSFilter(不减少结果集)
这个例子来源于一个实际的项目,我对其进行了适度的简化,完整的代码可以参考附件。
在线练习
{$ activeFileHint $}