jQuery學(xué)習(xí)筆記(正則)

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

url 分割

下面這個正則用來解析url,使用它可以獲取url中的各個部分(protocol,host,port)

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

涉及的知識點:

  • ^匹配一個輸入或一行的開頭, 例如/^a/匹配"an" 不匹配"An",如果設(shè)置了Multiline屬性婆硬,也匹配“\n”或“\r”之后的位置.出現(xiàn)在中括號時躺枕,匹配未包含其之后的任意字符,例如[^xyz]表示不匹配xyz
    ?

  • 分組分為捕獲性分組和非捕獲性分組氓栈,捕獲分組會存儲匹配的內(nèi)容渣磷,以便下次使用,非捕獲性分組不存儲匹配的內(nèi)容授瘦,以(?:...)表示

  • [\w.+-]protocol包含字母數(shù)字醋界,.+-這幾類字符竟宋,并且是以字母開頭,參考URI .+都是特殊字符形纺,為什么不轉(zhuǎn)義呢丘侠?[\w.+-]奇怪的是chrome下面測試[\w.+-]和[\w.+-]是等價的??

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

跨域

很多文章都在講跨域,到底什么是跨域呢脂新,看看ajax中是如何判斷跨域的

if ( s.crossDomain == null ) {
    parts = rurl.exec( s.url.toLowerCase() ); //使用rurl切割用戶請求的
    urls.crossDomain = !!( parts &&          //ajaxLocParts是當(dāng)前頁面的
         ( parts[ 1 ] !== ajaxLocParts[ 1 ] || parts[ 2 ] !== ajaxLocParts[ 2 ] ||
         ( parts[ 3 ] || ( parts[ 1 ] === "http:" ? "80" : "443" ) ) !==
         ( ajaxLocParts[ 3 ] || ( ajaxLocParts[ 1 ] === "http:" ? "80" : "443" ) ) )
    );
}
  • 協(xié)議不同
  • 域名不同
  • 端口不同

請求加時間戳挪捕,禁止瀏覽器緩存

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();
}

/%20/

jquery工具函數(shù)$.param用于對象序化

例如$.param({a : ' '}) -> a=+, 為什么結(jié)果是a=+而不是a=空格?

因為$.param方法內(nèi)部使用encodeURIComponent對字符進行編碼戏羽,空格經(jīng)過編碼是%20,然后使用str.replace( /%20/g , "+" )替換%20.

為什么要將空格變?yōu)榧犹柲兀?/strong>

w3c中關(guān)于 Form content types中要求瀏覽器必須實現(xiàn) application/x-www-form-urlencoded 和 multipart/form-data編碼規(guī)范担神,二前者明確規(guī)定 Space characters are replaced by `+'

下面是一些網(wǎng)絡(luò)參考:

一個題外話,我們知道http response有一個contentType響應(yīng)頭始花,http request 也可以設(shè)置contentType妄讯,你知道嗎?有什么作用呢酷宵?

response header的contentType是告訴瀏覽器亥贸,服務(wù)器回傳的數(shù)據(jù)是什么類型,瀏覽器要如何處理浇垦。

request header 的contentType自然就是告訴服務(wù)器炕置,瀏覽器傳給你的時什么數(shù)據(jù),你應(yīng)該如何去解碼處理等等男韧。

jquery 中ajax也是會默認設(shè)置request 的contentType header朴摊,

1.7.2版本之前的值是application/x-www-form-urlencoded,之后的版本加上了charset=UTF-8此虑。

對于使用ajax傳遞中文的情況甚纲,在使用1.7.2之前的版本會出現(xiàn)中文亂碼的情況。處理的方案也很簡單朦前,就是覆蓋原先的contentType介杆,使用contentType=application/x-www-form-urlencoded;charset=UTF-8。

替換函數(shù)參數(shù)問題

str.replace(ExpReg , replacementFn )

替換函數(shù)的第一個參數(shù)代表的是正則的匹配結(jié)果韭寸,之后的參數(shù)對應(yīng)的是正則中的分組春哨,_1 代表的就是第一個分組(a)的匹配結(jié)果。

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

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

Sizzle函數(shù)中有一處代碼恩伺,將兩個特殊字符('和)添加轉(zhuǎn)義字符\赴背,為什么要做這個事情呢?

$&的值指的是正則第一個參數(shù)匹配到的結(jié)果

去除首尾空格

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]+$/
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末胳徽,一起剝皮案震驚了整個濱河市积锅,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌养盗,老刑警劉巖缚陷,帶你破解...
    沈念sama閱讀 212,542評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異往核,居然都是意外死亡箫爷,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,596評論 3 385
  • 文/潘曉璐 我一進店門聂儒,熙熙樓的掌柜王于貴愁眉苦臉地迎上來虎锚,“玉大人,你說我怎么就攤上這事衩婚〈芑ぃ” “怎么了?”我有些...
    開封第一講書人閱讀 158,021評論 0 348
  • 文/不壞的土叔 我叫張陵非春,是天一觀的道長柱徙。 經(jīng)常有香客問我,道長奇昙,這世上最難降的妖魔是什么护侮? 我笑而不...
    開封第一講書人閱讀 56,682評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮储耐,結(jié)果婚禮上羊初,老公的妹妹穿的比我還像新娘。我一直安慰自己弧岳,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,792評論 6 386
  • 文/花漫 我一把揭開白布业踏。 她就那樣靜靜地躺著禽炬,像睡著了一般。 火紅的嫁衣襯著肌膚如雪勤家。 梳的紋絲不亂的頭發(fā)上腹尖,一...
    開封第一講書人閱讀 49,985評論 1 291
  • 那天,我揣著相機與錄音伐脖,去河邊找鬼热幔。 笑死乐设,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的绎巨。 我是一名探鬼主播近尚,決...
    沈念sama閱讀 39,107評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼场勤!你這毒婦竟也來了戈锻?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,845評論 0 268
  • 序言:老撾萬榮一對情侶失蹤和媳,失蹤者是張志新(化名)和其女友劉穎格遭,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體留瞳,經(jīng)...
    沈念sama閱讀 44,299評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡拒迅,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,612評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了她倘。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片璧微。...
    茶點故事閱讀 38,747評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖帝牡,靈堂內(nèi)的尸體忽然破棺而出往毡,到底是詐尸還是另有隱情,我是刑警寧澤靶溜,帶...
    沈念sama閱讀 34,441評論 4 333
  • 正文 年R本政府宣布开瞭,位于F島的核電站,受9級特大地震影響罩息,放射性物質(zhì)發(fā)生泄漏嗤详。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 40,072評論 3 317
  • 文/蒙蒙 一瓷炮、第九天 我趴在偏房一處隱蔽的房頂上張望葱色。 院中可真熱鬧,春花似錦娘香、人聲如沸苍狰。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,828評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽淋昭。三九已至,卻和暖如春安接,著一層夾襖步出監(jiān)牢的瞬間翔忽,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,069評論 1 267
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留歇式,地道東北人驶悟。 一個月前我還...
    沈念sama閱讀 46,545評論 2 362
  • 正文 我出身青樓,卻偏偏與公主長得像材失,于是被迫代替她去往敵國和親痕鳍。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,658評論 2 350

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理豺憔,服務(wù)發(fā)現(xiàn)额获,斷路器,智...
    卡卡羅2017閱讀 134,637評論 18 139
  • 第一章 入門 基本功能:訪問和操作 dom 元素恭应,控制頁面樣式抄邀,對頁面的事件處理,與ajax完美結(jié)合昼榛,有豐富的插件...
    X_Arts閱讀 1,034評論 0 2
  • 9.19--9.23 第7章 正則表達式 正則表達式是一個拆分字符串并查詢相關(guān)信息的過程境肾。 推薦練習(xí)網(wǎng)站: js ...
    如201608閱讀 1,018評論 0 4
  • 初衷:看了很多視頻、文章胆屿,最后卻通通忘記了奥喻,別人的知識依舊是別人的,自己卻什么都沒獲得非迹。此系列文章旨在加深自己的印...
    DCbryant閱讀 3,995評論 0 20
  • 今天是清明环鲤,這已經(jīng)是不知道難過了多久的一天,總是擔(dān)心你在另一個世界過的不好憎兽,有幾次夢見我們回到了從前冷离,你忙前忙后的...
    葵花子精靈閱讀 551評論 0 2