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"
最後替換的結果就是""