JavaScript正則表達(dá)式解析URL的技巧
正則表達(dá)式是一個描述字符模式的對象。
首先,此片文章并不是直接告訴你,url的正則表達(dá)式是什么,以及怎么使用這個正則表達(dá)式去解析一個URL地址,相信這種問題在網(wǎng)絡(luò)上已經(jīng)能找到很多。本文的宗旨在于教你如何理解URL的正則表達(dá)式,以達(dá)到理解正則表達(dá)式,以及能夠在日后的工作中寫出相對簡單的正則。言歸正傳,先看看一下的例子:
var parse_url = /^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/;
var parse_url = /^(?:([A-Za-z]+):)?(\/{,})([-.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/; var url = "http://qiji.kerlai.net:/GoodsBasic/Operate/?q#simen"; var result = parse_url.exec(url); var names = ["url","scheme","slash","host","port","path","query","hash"]; for(var i=; i <names.length;i++){ console.log(names[i]+":"+result[i]); } //輸出結(jié)果 /* url:http://qiji.kerlai.net:/GoodsBasic/Operate/?q#simen scheme:http slash:// host:qiji.kerlai.net port: path:GoodsBasic/Operate/ query:q hash:simen */
我們先來看看結(jié)果:
url:http://qiji123.kerlai.net:81/GoodsBasic/Operate/12678?q#simen
scheme:http
slash://
host:qiji123.kerlai.net
port:81
path:GoodsBasic/Operate/12678
query:q
hash:simen
代碼中result數(shù)組的集合是['http://qiji123.kerlai.net:81/GoodsBasic/Operate/12678?q#simen','http', '//', 'qiji123.kerlai.net', '81', 'GoodsBasic/Operate/12678', 'q', 'simen']
現(xiàn)在我們嘗試把從第2個到最后一個的結(jié)果一個一個鏈接起來,得到的結(jié)果為:"http // qiji123.kerlai.net 81 GoodsBasic/Operate/12678 q simen" 和原來的url相比,缺少了":?#"等鏈接符。這個是為何?說到這,我們就要引出正則表達(dá)式的一個概念為正則表達(dá)式的分組。正則表達(dá)式有4種分組,分別是:捕獲型、飛捕獲型、向前正向匹配、向前負(fù)向匹配。此處我重點介紹前面兩種,后面兩種大家可以自行補腦。其中非捕獲型的就不會在結(jié)果的數(shù)組中出現(xiàn),()括起來的為一個組,即會占用結(jié)果數(shù)組的一個位置。同樣如果在你的正則表達(dá)式中,沒有用括號括起來,那么所匹配到的字符將不會出現(xiàn)在exec()方法所返回的數(shù)組中。正則的分組是使用()括起來的稱為一個分組。
1、捕獲型分組:(...)
2、非捕獲型分組:(?: .....)
3、向前正向匹配:(?=........)
4、向前負(fù)向匹配:(?!.........)
接下來我們來分解parse_url這個正則表達(dá)式,第一個分組
1、^表示字符串的開始
整個正則因子是匹配一個協(xié)議名:http
2、(?: )表示一個非捕獲型分組:即在這個括號內(nèi)的,但是不在其子括號內(nèi)所匹配到的字符將不放入結(jié)果數(shù)組中。
3、()表示一個捕獲型分組,此括號內(nèi)所匹配到的字符放入結(jié)果數(shù)組中對應(yīng)url中的:http字符
4、[]為正則表達(dá)式類,表示符合中括號內(nèi)任一一個字符。
7、A-Za-z表示字母A到字母Z,字母a到字母z。[A-Za-z]表示符合字母A到字母Z,字母a到字母z的任一一個字符
5、+表示匹配1次貨多次
6、?表示此組為可選匹配條件
第二個正則因子:(\/{0,3})://
捕獲型分組,\/表示一個應(yīng)該被匹配的/,{0,3}表示\將被匹配0次或者1到3次之間
([0-9.\-A-Za-z]+):qiji123.kerlai.net
捕獲型分組,由一個或多個數(shù)字 ,“.”,”\-“(轉(zhuǎn)義成”-“),字母A到Z和字母a到z組成
(?::(\d+))?:81
前置:放在非捕獲型分組中將不會出現(xiàn)在返回數(shù)組中,\d表示匹配數(shù)字。整個因子就是匹配前置為:后面跟隨一個或多個數(shù)字。此分組因子為可選的
(?:\/([^?#]*))?:GoodsBasic/Operate/12678
該分組由/開始,^在此處表示非的意思,即除?#之外的所有字符 最后一個?表示此正則因子分組可選
(?:\?([^#]*))? :q
該分組表示包含0個或多個非#字符
(?:#(.*))?:simen
該分組以#開始,(.)將匹配除結(jié)束符以外的所有字符。
$表示這個字符串結(jié)束。
到此就已經(jīng)分析完url的所有分組。接下來大家可以寫寫電話號碼的正則表達(dá)式:既能匹配固定電話有能匹配手機號(這個會用到新的字符:|)
字符 | 含意 |
\ |
做為轉(zhuǎn)意,即通常在"\"后面的字符不按原來意義解釋,如/b/匹配字符"b",當(dāng)b前面加了反斜桿后/\b/,轉(zhuǎn)意為匹配一個單詞的邊界。 -或- |
^ | 匹配一個輸入或一行的開頭,/^a/匹配"an A",而不匹配"An a" |
$ | 匹配一個輸入或一行的結(jié)尾,/a$/匹配"An a",而不匹配"an A" |
* | 匹配前面元字符0次或多次,/ba*/將匹配b,ba,baa,baaa |
+ | 匹配前面元字符1次或多次,/ba*/將匹配ba,baa,baaa |
? | 匹配前面元字符0次或1次,/ba*/將匹配b,ba |
(x) | 匹配x保存x在名為$1...$9的變量中 |
x|y | 匹配x或y |
{n} | 精確匹配n次 |
{n,} | 匹配n次以上 |
{n,m} | 匹配n-m次 |
[xyz] | 字符集(character set),匹配這個集合中的任一一個字符(或元字符) |
[^xyz] | 不匹配這個集合中的任何一個字符 |
[\b] | 匹配一個退格符 |
\b | 匹配一個單詞的邊界 |
\B | 匹配一個單詞的非邊界 |
\cX | 這兒,X是一個控制符,/\cM/匹配Ctrl-M |
\d | 匹配一個字?jǐn)?shù)字符,/\d/ = /[0-9]/ |
\D | 匹配一個非字?jǐn)?shù)字符,/\D/ = /[^0-9]/ |
\n | 匹配一個換行符 |
\r | 匹配一個回車符 |
\s | 匹配一個空白字符,包括\n,\r,\f,\t,\v等 |
\S | 匹配一個非空白字符,等于/[^\n\f\r\t\v]/ |
\t | 匹配一個制表符 |
\v | 匹配一個重直制表符 |
\w | 匹配一個可以組成單詞的字符(alphanumeric,這是我的意譯,含數(shù)字),包括下劃線,如[\w]匹配"$5.98"中的5,等于[a-zA-Z0-9] |
\W | 匹配一個不可以組成單詞的字符,如[\W]匹配"$5.98"中的$,等于[^a-zA-Z0-9]。 |
用re = new RegExp("pattern",["flags"]) 的方式比較好 pattern : 正則表達(dá)式 flags: g (全文查找出現(xiàn)的所有 pattern) i (忽略大小寫) m (多行查找) |
vaScript動態(tài)正則表達(dá)式問題 請問正則表達(dá)式可以動態(tài)生成嗎? 例如JavaScript中: var str = "strTemp"; 要生成: var re = /strTemp/; 如果是字符連接: var re = "/" + str + "/"即可 |
相關(guān)文章
js正則表達(dá)式學(xué)習(xí)和總結(jié)(必看篇)
下面小編就為大家?guī)硪黄猨s正則表達(dá)式學(xué)習(xí)和總結(jié)(必看篇)。小編覺得挺不錯的,希望對大家有所幫助。一起跟隨小編過來看看吧,祝大家游戲愉快哦2016-11-11正確使用帶有"g"標(biāo)記的javascript正則表達(dá)式
javascript正則表達(dá)式是對字符串執(zhí)行模式匹配的強大工具。正確使用它會給我們的工作帶來很大的便利??墒怯行┑胤接捎谖覀儧]有太注意或者根本不理解,就會遇到不可預(yù)料的麻煩。2009-05-05