之前在前端群和一群人聊天,有人提到了正則表達式牵素,很多人都說,沒必要深入了解正則表達式澄者,拿來主義笆呆,有需要的時候直接網(wǎng)上找,都有現(xiàn)成的粱挡,我并不吃驚赠幕,因為我也是拿來主義,沒有系統(tǒng)的學習過询筏,或者說了解過正則表達式榕堰,但是出于好奇,百度了一下正則表達式嫌套,發(fā)現(xiàn)它并沒有想象中那么簡單逆屡,一旦真正學會它,我覺得在以后做項目中踱讨,會輕松很多魏蔗,或者說思路會廣闊很多,所以準備自己寫一點學習正則的感悟和理解痹筛,以供自己以后復習莺治。
申明正則表達式##
在JavaScript中,正則表達式其實是正則對象帚稠,也可以說成RegExp對象谣旁,既然是對象,那么就和對象聲明一樣滋早,有2種方式聲明榄审,一種是直接字面量聲明,如下:
var a = /^cat/i;
上述代碼很簡單杆麸,就是用字面量的方式創(chuàng)建了一個正則表達式瘟判。它的結構大概是這樣的:
var 正則的名字 = /正則表達式/正則的標志(行為)
其中最復雜的應該就是正則表達式部分了怨绣,這個先不提,慢慢學吧拷获。正則的標志有以下3種:
- g:表示的是全局模式篮撑,在這種模式下,這條正則規(guī)則將會去匹配你規(guī)定的所有字符串匆瓜,而非發(fā)現(xiàn)一個匹配項就停止赢笨。
- i:表示匹配的字符串不區(qū)分大小寫,在上述例子中驮吱,就可以理解為茧妒,匹配以cat,或者Cat左冬,或者CAT等等開頭的段落桐筏。
- m:表示多行模式,在這種模式下到達了一行文本的末尾會繼續(xù)再下一行查找是否存在于之相匹配的拇砰。
正則的行為可以有多個梅忌。當然,還有第二種申明正則的方式除破,構造函數(shù)聲明(new關鍵字)牧氮,具體如下:
var a = new RegExp('^cat','i');
代碼也很簡單,結構大概是這樣的:
var 正則的名字 = new RegExp('正則表達式'瑰枫,'正則的標志')
2種方式都可以創(chuàng)建正則表達式踱葛,但是有一點要注意,字面量聲明是在//里面聲明光坝,而構造函數(shù)聲明傳進去的參數(shù)是字符串尸诽,所有遇到一些\n
這樣轉義字符,需要雙重轉義盯另,變成\\\n
逊谋,下面列出了一些例子:
字面量模式 | 構造函數(shù)模式的字符串 |
---|---|
/\[bc\]at/ | '\\[bc\\]at' |
/\.at/ | '\\.at' |
/\w\\hello\123/ | '\\w\\\\hello\\\\123' |
正則表達式的基礎##
再上一個例子中,我們看到了
var a = /^cat/i
其中^cat
土铺,^
是元字符胶滋,cat
為普通字符,元字符的意思就是說悲敷,比起普通字符有更多的含義究恤,比如^
的意思就是一行的開始,與之相對應的還有$
元字符后德,代表一行的結束部宿。
而^cat
可以理解為,匹配以cat
開頭的行。當然理张,還有更準確的理解赫蛇,匹配以c
作為一行的第一個字符,緊接著是a
雾叭,然后是t
的文本悟耘。因為正則匹配都是按照字符而不是單詞,所以這樣理解會更加準確一些织狐。
下面總結一下常用的基礎的正則表達式元字符:
元字符 | 名稱 | 匹配對象 |
---|---|---|
. | 點號 | 單個任意字符 |
[···] | 字符組 | 并列出的任意字符 |
[ ^···] | 排除型字符組 | 未列出的任意字符 |
^ | 脫字符 | 行的起始位置 |
$ | 美元符 | 行的結束位置 |
< | 反斜線-小于 | 單詞的起始位置 |
\> | 反斜線-大于 | 單詞的結束位置 |
丨 | 豎線 | 匹配分隔兩邊的任意一個表達式 |
(···) | 括號 | 限制豎線的作用范圍暂幼,分組匹配,反向引用等 |
表示重復的元字符:
元字符 | 次數(shù)下限 | 次數(shù)上限 | 含義 |
---|---|---|---|
? | 無 | 1 | 可以出現(xiàn)移迫,也可以只出現(xiàn)一次(單次可選) |
* | 無 | 無 | 可以出現(xiàn)無窮多次旺嬉,也可以不出現(xiàn)(任意次數(shù)均可) |
+ | 1 | 無 | 可以出現(xiàn)無窮多次,但至少要出現(xiàn)一次(至少一次) |
規(guī)定重復出現(xiàn)的次數(shù)范圍:{min,max}厨埋,如:
var a = /[0-9]{1,5}/ //匹配0至9的任意數(shù)字出現(xiàn)1至5次的行
正則實例方法##
JavaScript中邪媳,正則提供了2個方法。exec()和test()荡陷。
exec()
是專門為捕獲組而設計的雨效,它接受一個參數(shù),即要作用的字符串亲善,然后返回第一個匹配項信息的數(shù)組(沒有匹配項返回null
)设易,該數(shù)組中逗柴,第一項是整個模式匹配的字符串蛹头,其他項是與模式中捕獲組的字符串(如果沒有捕獲組則只含有一項)。除此之外戏溺,該數(shù)組還包含2個屬性渣蜗,input
和index
,input
為作用的字符串旷祸,index
為匹配項在字符串中的位置耕拷。具體例子如下:
var text = '123456789CATCatCAtnnlsnfl'
var reg = /(cat)+/gi;
var match = reg.exec(text);
console.log(match[0]);//CATCatCAt
console.log(match[1]);//CAt
console.log(match.index);//9
console.log(match.input);//123456789CATCatCAtnnlsnfl
test()
方法相對來說就簡單一點了,它接受一個字符串參數(shù)托享,匹配成功骚烧,返回true
,匹配失敗闰围,返回false
赃绊,所以常用在if判斷句中。具體代碼如下:
var text = '123456789CATCatCAtnnlsnfl'
var reg = /(cat)+/gi;
var reg2 = /(caat)+/gi;
var match = reg.test(text);
var match2 = reg.test(text);
console.log(match);//true
console.log(match2);//false
String對象里的正則##
string對象有很多方法都是支持正則的羡榴,比如search(),match()等等碧查。下面,我們就來總結一下,string支持正則的方法忠售。
search()
search()
方法支持傳入一個參數(shù)传惠,該參數(shù)可以是普通的字符串,也可以是一個正則表達式稻扬,如果是字符串卦方,那就返回第一個符合條件的位置,同理腐螟,如果是正則表達式愿汰,就返回匹配正則表達式的位置,如果匹配失敗乐纸,返回-1
衬廷,具體代碼如下:
var text = '123456789CATCatCAtnnlsnfl'
var reg = /(cat)+/gi;
var match = text.search(reg);
var match2 = text.search('cat');
console.log(match);//9
console.log(match2);//-1
值得一提的是,在search()
中汽绢,會忽略正則表達式的g
標志吗跋,并且總是從字符串左向右匹配,一旦匹配到第一個符合條件的項就會立馬結束匹配宁昭,并返回項所在的位置跌宛。
match()
match()
方法支持傳入一個參數(shù),該參數(shù)可以是普通的字符串积仗,也可以是一個正則表達式疆拘,如果是字符串,那就返回一個以第一個匹配的字符串寂曹,并且有index
,input
屬性的數(shù)組哎迄,其中,index
是第一個匹配成功的位置隆圆,input
是字符串本身漱挚,如果匹配失敗,則返回null
渺氧;同理旨涝,如果是正則表達式,那就返回所有匹配成功的字符串組成的數(shù)組侣背,并有input
白华,index
,具體代碼如下:
var text = '123456789catCATCatCAtnnlsnflcAt'
var reg = /cat/gi;
var reg2 = /c.t/i;
var match = text.match(reg);
var match2 = text.match('cat');
var match3 = text.match(reg2);
console.log(match);//["cat", "CAT", "Cat", "CAt", "cAt"]
console.log(match2);//["cat", index: 9, input: "123456789catCATCatCAtnnlsnflcAt"]
console.log(match3);//["cat", index: 9, input: "123456789catCATCatCAtnnlsnflcAt"]
值得一提的是贩耐,如果正則表達式是全局匹配弧腥,即有g
標志,返回的只是一個所有符合條件的項的數(shù)組憔杨,而沒有index
鸟赫,input
屬性。
replace()
replace()
方法接受2個參數(shù),第一個參數(shù)是需要匹配的字符串或者正則表達式抛蚤,第二個參數(shù)是替換的字符串台谢。然后返回新的字符串。具體代碼如下:
var text = '123456789catCATCatCAtnnlsnflcAt'
var reg = /(cat)+/gi;
var match = text.replace(reg,'dog');
var match2 = text.replace('cat','dog');
console.log(match);//123456789dognnlsnfldog
console.log(match2);//123456789dogCATCatCAtnnlsnflcAt
還沒完K昃朋沮!在Perl
中,我們知道有括號的分組匹配缀壤,即樊拓,用括號能夠‘記住’他們包含子表達式匹配的文本,在JavaScript中
的replace()
中也有與之類似的功能塘慕,不過寫法不一樣筋夏,JavaScript
,使用的是$
图呢,可以用$
來得到括號里面的值并保留条篷,具體如下:
var text = '123456789catCATCatCAtnnlsnflcAt'
var reg = /(cat)?(cat)/gi;
var match = text.replace(reg,' 1=$1 2=$2 ');
var match2 = text.replace('cat','dog');
console.log(match);//123456789 1=cat 2=CAT 1=Cat 2=CAt nnlsnflcAt
console.log(match2);//123456789dogCATCatCAtnnlsnflcAt
使用$1
可以去到第一個括號的值并保留,同理蛤织,可以一直向下取值赴叹。
當然,不僅僅只有$number
的用法指蚜,具體還有
符號 | 含義 |
---|---|
1....99 | 與regexp中的第1到第99個子表達式相匹配的文本乞巧。 |
$& | 與RegExp相匹配的子字符串。 |
lastMatch或RegExp["$_"] | 返回任何正則表達式搜索過程中的最后匹配的字符摊鸡。 |
lastParen或 RegExp["$+"] | 返回任何正則表達式查找過程中最后括號的子匹配绽媒。 |
leftContext或RegExp["$`"] | 返回被查找的字符串從字符串開始的位置到最后匹配之前的位置之間的字符。 |
rightContext或RegExp["$'"] | 返回被搜索的字符串中從最后一個匹配位置開始到字符串結尾之間的字符柱宦。 |
split()
split()
接受2個參數(shù)些椒, 第一個參數(shù)是一個字符串或者正則表達式播瞳,第二個參數(shù)可填可不填掸刊,是限制返回數(shù)組的最大長度。通過匹配字符串或者正則表達式赢乓,來對字符串進行切割忧侧,并返回一個切割的數(shù)組。具體代碼如下:
var text = '1,2-3,4.5,6-7*8,9'
var reg = /[,-.*]*/gi;
var match = text.split(reg);
var match2 = text.split(',');
var match3 = text.split(reg,3);
console.log(match);//["1", "2", "3", "4", "5", "6", "7", "8", "9"]
console.log(match2);//["1", "2-3", "4.5", "6-7*8", "9"]
console.log(match3);//["1", "2", "3"]
JavaScript 正則表達式(1)
JavaScript 正則表達式(2)
JavaScript 正則表達式(3)
JavaScript 正則表達式(4)