JavaScript 正則表達式(1)


之前在前端群和一群人聊天,有人提到了正則表達式,很多人都說,沒必要深入了解正則表達式,拿來主義,有需要的時候直接網上找,都有現成的,我并不吃驚,因為我也是拿來主義,沒有系統的學習過,或者說了解過正則表達式,但是出于好奇,百度了一下正則表達式,發現它并沒有想象中那么簡單,一旦真正學會它,我覺得在以后做項目中,會輕松很多,或者說思路會廣闊很多,所以準備自己寫一點學習正則的感悟和理解,以供自己以后復習。


申明正則表達式##

在JavaScript中,正則表達式其實是正則對象,也可以說成RegExp對象,既然是對象,那么就和對象聲明一樣,有2種方式聲明,一種是直接字面量聲明,如下:

var a = /^cat/i;

上述代碼很簡單,就是用字面量的方式創建了一個正則表達式。它的結構大概是這樣的:

var 正則的名字 = /正則表達式/正則的標志(行為)

其中最復雜的應該就是正則表達式部分了,這個先不提,慢慢學吧。正則的標志有以下3種:

  • g:表示的是全局模式,在這種模式下,這條正則規則將會去匹配你規定的所有字符串,而非發現一個匹配項就停止。
  • i:表示匹配的字符串不區分大小寫,在上述例子中,就可以理解為,匹配以cat,或者Cat,或者CAT等等開頭的段落。
  • m:表示多行模式,在這種模式下到達了一行文本的末尾會繼續再下一行查找是否存在于之相匹配的。

正則的行為可以有多個。當然,還有第二種申明正則的方式,構造函數聲明(new關鍵字),具體如下:

var a = new RegExp('^cat','i');

代碼也很簡單,結構大概是這樣的:

var 正則的名字 = new RegExp('正則表達式','正則的標志')

2種方式都可以創建正則表達式,但是有一點要注意,字面量聲明是在//里面聲明,而構造函數聲明傳進去的參數是字符串,所有遇到一些\n這樣轉義字符,需要雙重轉義,變成\\\n,下面列出了一些例子:

字面量模式 構造函數模式的字符串
/\[bc\]at/ '\\[bc\\]at'
/\.at/ '\\.at'
/\w\\hello\123/ '\\w\\\\hello\\\\123'

正則表達式的基礎##

再上一個例子中,我們看到了

var a = /^cat/i

其中^cat,^元字符cat為普通字符,元字符的意思就是說,比起普通字符有更多的含義,比如^的意思就是一行的開始,與之相對應的還有$元字符,代表一行的結束。
^cat可以理解為,匹配以cat開頭的行。當然,還有更準確的理解,匹配以c作為一行的第一個字符,緊接著是a,然后是t的文本。因為正則匹配都是按照字符而不是單詞,所以這樣理解會更加準確一些。
下面總結一下常用的基礎的正則表達式元字符:

元字符 名稱 匹配對象
. 點號 單個任意字符
[···] 字符組 并列出的任意字符
[ ^···] 排除型字符組 未列出的任意字符
^ 脫字符 行的起始位置
$ 美元符 行的結束位置
< 反斜線-小于 單詞的起始位置
\> 反斜線-大于 單詞的結束位置
豎線 匹配分隔兩邊的任意一個表達式
(···) 括號 限制豎線的作用范圍,分組匹配,反向引用等

表示重復的元字符:

元字符 次數下限 次數上限 含義
? 1 可以出現,也可以只出現一次(單次可選)
* 可以出現無窮多次,也可以不出現(任意次數均可)
+ 1 可以出現無窮多次,但至少要出現一次(至少一次)

規定重復出現的次數范圍:{min,max},如:

var a = /[0-9]{1,5}/  //匹配0至9的任意數字出現1至5次的行

正則實例方法##

JavaScript中,正則提供了2個方法。exec()test()。

exec()是專門為捕獲組而設計的,它接受一個參數,即要作用的字符串,然后返回第一個匹配項信息的數組(沒有匹配項返回null),該數組中,第一項是整個模式匹配的字符串,其他項是與模式中捕獲組的字符串(如果沒有捕獲組則只含有一項)。除此之外,該數組還包含2個屬性,inputindex,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()方法相對來說就簡單一點了,它接受一個字符串參數,匹配成功,返回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()方法支持傳入一個參數,該參數可以是普通的字符串,也可以是一個正則表達式,如果是字符串,那就返回第一個符合條件的位置,同理,如果是正則表達式,就返回匹配正則表達式的位置,如果匹配失敗,返回-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()方法支持傳入一個參數,該參數可以是普通的字符串,也可以是一個正則表達式,如果是字符串,那就返回一個以第一個匹配的字符串,并且有index,input屬性的數組,其中,index是第一個匹配成功的位置,input是字符串本身,如果匹配失敗,則返回null;同理,如果是正則表達式,那就返回所有匹配成功的字符串組成的數組,并有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標志,返回的只是一個所有符合條件的項的數組,而沒有indexinput屬性。


replace()
replace()方法接受2個參數,第一個參數是需要匹配的字符串或者正則表達式,第二個參數是替換的字符串。然后返回新的字符串。具體代碼如下:

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

還沒完??!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個參數, 第一個參數是一個字符串或者正則表達式,第二個參數可填可不填,是限制返回數組的最大長度。通過匹配字符串或者正則表達式,來對字符串進行切割,并返回一個切割的數組。具體代碼如下:

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)

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 第5章 引用類型(返回首頁) 本章內容 使用對象 創建并操作數組 理解基本的JavaScript類型 使用基本類型...
    大學一百閱讀 3,270評論 0 4
  • 初衷:看了很多視頻、文章,最后卻通通忘記了,別人的知識依舊是別人的,自己卻什么都沒獲得。此系列文章旨在加深自己的印...
    DCbryant閱讀 4,060評論 0 20
  • 推薦幾個正則表達式編輯器 Debuggex :https://www.debuggex.com/ PyRegex:...
    木易林1閱讀 11,540評論 9 151
  • 很久以前,有一位騎士,他認為自己是一個善良又有愛心的人。于是他身穿盔甲,不停的拯救公主、打倒惡龍,受到人民的無限愛...
    時光蜜糖閱讀 1,037評論 3 51
  • 安卓,電腦:ADSafe 蘋果:樂網 瀏覽網頁、看視頻過濾廣告神器 -----------------------...
    只是一點閱讀 244評論 0 1