JavaScript入门教程

JavaScript简介
JavaScript语法基础
JavaScript流程控制
JavaScript函数
面向对象编程
JavaScript事件
JavaScript DOM
正则表达式
JavaScript BOM
AJAX

专题分析

浏览器兼容性
JS优化
Web前端开发规范
编辑器推荐
总结和笔记

学习助手

对象参考手册
ECMAScript分析
数据中心
QQ交流群

实例:JSFilter

本小节提供一个实例,用以展示在实际应用中正则表达式的用途,当然,一个例子不可能涵盖所有的内容,只是一个最常见的场景。

考虑这样一种情况,我们在 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(不减少结果集)

这个例子来源于一个实际的项目,我对其进行了适度的简化,完整的代码可以参考附件。