JavaScript正则表达式小知识

需要有JavaScript和Regular Expressions基本知识

1、Regular Expression Object
正则表达式对象：本对象包含正则表达式模式以及表明如何应用模式的标志。

2、RegExp Object
RegExp对象：保存有关正则表达式模式匹配信息的固有全局对象。

这两个是不一样的，具体的参见[url="http://msdn.microsoft.com/en-us/library/htbw4ywd(v=VS.85).aspx"]参考手册[/url]
http://msdn.microsoft.com/en-us/library/htbw4ywd(v=VS.85).aspx
这个是Microsoft官方的参考手册
暂时没有发现MDC等其它地方的参考手册有明确说明这一点
https://developer.mozilla.org/en/JavaScript/Guide/Regular_Expressions
但是[url="https://developer.mozilla.org/en/JavaScript/Guide/Regular_Expressions"]这里[/url]面提到了这类特性的用法

下面看两段小小的代码，也是从百度页面上抠下来的，做了些小的调整

addClassName = function(d, f) {

    // ...    
    // 判断这个DOM对象是否存在，不存在就直接返回，这些代码都被我省掉了


    // 先把这个DOM对象的class属性的值按space截开转成字符串数组b
    // c是一个去前后空格的函数，简单测试情况下也可以去掉
    var b = d.className.split(" "), c = trim;


    if(!new RegExp("(^|\\s{1,})" + c(f) + "(\\s{1,}|$)").test(d.className)) {

        d.className=c(b.concat(f).join(" "));

    }

};

这个函数看名字就很清楚了，是给页面上的对象的class属性添加值，因为class属性可以有多个用space隔开的值
只是在添加值之前做了很多判断和处理，我们只看正则表达式相关的
也就是那个if语句内的情况
把传进来的属性值和已经存在的class属性值相比较，如果不存在就添加到尾部，如果存在就什么都不做
它通过new创建的正则表达式对象一共可以侦测出class属性值是类似以下的这几种情况，也满足了功能需求

red noborder flashing
noborder flashing
red noborder
noborder

也就是当我们传入"noborder"这个值的时候，如果原来class属性值已经是类似上面这四种情况都可以被侦测出来


再来看另外的一段代码，这段代码跟上面是相反的，就是把class属性中某个指定的值去掉(如果已经存在这个指定的值的话)

removeClassName = function(d, f) {

    // ...    
    // 判断这个DOM对象是否存在，不存在就直接返回，这些代码都被我省掉了


    var c = trim, re = new RegExp("(^|\\s{1,})" + c(f) + "(\\s{1,}|$)", "g");

    d.className = c(d.className.replace(re, "$2"));

};

替换函数是查找到了就替换，并把它替换成$2，这个$2就是RegExp全局对象的一个属性，它始终存储的是最后一次匹配的结果，一共可以保存$1到$9共9个子匹配的结果
如果没有子匹配，默认的$n值就是空字符串
比如我们这里的re正则表达式对象只有两个子匹配，那么就只可能有$1和$2有值，其它都是空串
这里我们用$2来替换，实际$2返回的可能只有任何的空白字符或者字符串结尾，可以用charCodeAt函数将其unicode编码打印出来观察

通过例子来看
如果：
d.className = "red noborder flashing"
f = "noborder"
最后替换的结果就是"red flashing"

如果：
d.className = "noborder flashing"
f = "noborder"
最后替换的结果就是" flashing"

如果：
d.className = "red noborder"
f = "noborder"
最后替换的结果就是"red"

如果：
d.className = "noborder"
f = "noborder"
最后替换的结果就是""