jQuery->正則

jQuery中使用了大量的正則表達式，這些正則匯聚了做者們的智慧,值得細心琢磨.

1. url分割

這個正則描述的是url，使用它能夠獲取url中的各個部分(protocol,host,port)

rurl = /^([\w.+-]+:)(?:\/\/([^\/?#:]*)(?::(\d+)|)|)/;

涉及的知識點：

• ^ 匹配一個輸入或一行的開頭, 例如/^a/匹配"an" 不匹配"An"，若是設置了Multiline屬性，^也匹配「\n」或「\r」以後的位置.^ 出如今中括號時，匹配未包含其以後的任意字符，例如[^xyz]表示不匹配xyz

• 分組分爲捕獲性分組和非捕獲性分組，捕獲分組會存儲匹配的內容，以便下次使用，非捕獲性分組不存儲匹配的內容，以(?:...)表示

• [\w.+-] protocol 包含 字母數字，.+-這幾類字符，而且是以字母開頭，參考URI .+都是特殊字符，爲何不轉義呢？[\w\.\+-]奇怪的是chrome下面測試[\w.+-]和[\w\.\+-]是等價的？

• | 選擇符，rurl中選擇符的使用有點奇怪，/x|/ 的意思是匹配x或者空字符串/(x)|()/.exec('a') -> ["", undefined, ""];

 

2. 跨域

不少文章都在講跨域，到底什麼是跨域呢，看看ajax中是如何判斷跨域的

if ( s.crossDomain == null ) {
    parts = rurl.exec( s.url.toLowerCase() ); //使用rurl切割用戶請求的url
    s.crossDomain = !!( parts &&              //ajaxLocParts是當前頁面的location.href;
        ( parts[ 1 ] !== ajaxLocParts[ 1 ] || parts[ 2 ] !== ajaxLocParts[ 2 ] ||
            ( parts[ 3 ] || ( parts[ 1 ] === "http:" ? "80" : "443" ) ) !==
                ( ajaxLocParts[ 3 ] || ( ajaxLocParts[ 1 ] === "http:" ? "80" : "443" ) ) )
    );
}

a. 協議不一樣 b. 域名不一樣 c. 端口不一樣

 

3 . 請求加時間戳，避免緩存

function addDateStamp( url ){
    var rts = /([?&])_=[^&]*/
    return rts.test( url) ?

        // If there is already a '_' parameter, set its value
        url.replace( rts, "$1_=" + new Date().getTime() ) :

        // Otherwise add one to the end
        url + ( /\?/.test( url ) ? "&" : "?" ) + "_=" + new Date().getTime();
} 

 

4. /%20/

jquery工具函數$.param用於對象序化

例如$.param({a : ' '})  -> a=+, 爲何結果是a=+而不是a=空格？由於$.param方法內部使用encodeURIComponent對字符進行編碼，空格通過編碼是%20,而後使用str.replace( /%20/g , "+" )替換%20.

爲何要將空格變爲加號呢？w3c中關於 Form content types中要求瀏覽器必須實現 application/x-www-form-urlencoded  和 multipart/form-data編碼規範，二前者明確規定 Space characters are replaced by `+'  傳送門下面是一些網絡參考：

阮一峯的關於URL編碼 

When to encode space to plus (+) or %20?

Percent-encoding

x-www-form-urlencoded

urlencoded算法

 

一個題外話，咱們知道http response有一個contentType響應頭，http request 也能夠設置contentType，你知道嗎？有什麼做用呢？

response header的contentType是告訴瀏覽器，服務器回傳的數據是什麼類型，瀏覽器要如何處理。request header 的contentType天然就是告訴服務器，瀏覽器傳給你的時什麼數據，你應該如何去解碼處理等等。jquery 中ajax也是會默認設置request 的contentType header，1.7.2版本以前的值是application/x-www-form-urlencoded，以後的版本加上了charset=UTF-8。對於使用ajax傳遞中文的狀況，在使用1.7.2以前的版本會出現中文亂碼的狀況。處理的方案也很簡單，就是覆蓋原先的contentType，使用contentType=application/x-www-form-urlencoded;charset=UTF-8。

 

5.替換函數參數問題

str.replace(ExpReg , replacementFn )

替換函數的第一個參數表明的是正則的匹配結果，以後的參數對應的是正則中的分組，_1 表明的就是第一個分組(a)的匹配結果。

var regExp = /(a)(b)(c)/;
function replacement( _, _1, _2, _3 ){
    return _3 + _2 + _1 ;
}
console.log('abc'.replace(regExp,replacement));  // output: cba

 

 6. idGetByProgram.replace( /'|\\/g , "\\$&" )

Sizzle函數中有一處代碼，將兩個特殊字符('和\)添加轉義字符\，爲何要作這個事情呢？

$&的值是第一個參數匹配到的結果

 

7 去除首尾空格

sizzle中有一個去除首尾空格的正則

rtrim = /^[\x20\t\r\n\f]+|((?:^|[^\\])(?:\\.)*)[\x20\t\r\n\f]+$/g

((?:^|[^\\])(?:\\.)*)東東是用來幹什麼的，是有什麼特殊狀況須要考慮嗎？

下面的，也可以去掉首尾空格，

 /^\s+|\s+$/g

jquery自己也定義了一個去除空格的正則，名字也叫rtrim，可是兩個正則寫法不一樣爲何呢？

rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/