詳解Javascript中正則表達式的使用

正則表達式用來處理字符串特別好用，在JavaScript中能用到正則表達式的地方有不少，本文對正則表達式基礎知識和Javascript中正則表達式的使用作一個總結。

第一部分簡單列舉了正則表達式在JavaScript中的使用場景；第二部分詳細介紹正則表達式的基礎知識，寫出一些例子方便理解。

本文的內容是我本身看完正則表達式寫法，和犀牛書中js正則表達式的章節後的總結，因此內容可能會有疏漏和不嚴謹的地方。如有大神路過發現文中錯誤的地方，歡迎斧正！

Javascript中正則表達式的使用

一個正則表達式能夠認爲是對一種字符片斷的特徵描述，而它的做用就是從一堆字符串中找出知足條件的子字符串。好比我在JavaScript中定義一個正則表達式：

var reg=/hello/    或者  var reg=new RegExp("hello")

那麼這個正則表達式能夠用來從一堆字符串中找出 hello 這個單詞。而「找出」這個動做，其結果多是找出第一個hello的位置、用別的字符串替換hello、找出全部hello等等。下面就列舉一下JavaScript中可使用正則表達式的函數，簡單介紹一下這些函數的做用，更復雜的用法會在第二部分中介紹。

String.prototype.search方法

用來找出原字符串中某個子字符串首次出現的index，沒有則返回-1

"abchello".search(/hello/);  //  3

String.prototype.replace方法

用來替換字符串中的子串

"abchello".replace(/hello/,"hi");   //  "abchi"

String.prototype.split方法

用來分割字符串

"abchelloasdasdhelloasd".split(/hello/);  //["abc", "asdasd", "asd"]

String.prototype.match方法

用來捕獲字符串中的子字符串到一個數組中。默認狀況下只捕獲一個結果到數組中，正則表達式有」全局捕獲「的屬性時(定義正則表達式的時候添加參數g)，會捕獲全部結果到數組中

"abchelloasdasdhelloasd".match(/hello/);  //["hello"]

"abchelloasdasdhelloasd".match(/hello/g);  //["hello","hello"]

做爲match參數的正則表達式在是否擁有全局屬性的狀況下，match方法的表現還不同，這一點會在後邊的正則表達式分組中講到。

RegExp.prototype.test方法

用來測試字符串中是否含有子字符串

/hello/.test("abchello");  // true

RegExp.prototype.exec方法

和字符串的match方法相似，這個方法也是從字符串中捕獲知足條件的字符串到數組中，可是也有兩個區別。

1. exec方法一次只能捕獲一份子字符串到數組中，不管正則表達式是否有全局屬性

var reg=/hello/g;
reg.exec("abchelloasdasdhelloasd");   // ["hello"]

 

2. 正則表達式對象(也就是JavaScript中的RegExp對象)有一個lastIndex屬性，用來表示下一次從哪一個位置開始捕獲，每一次執行exec方法後，lastIndex就會日後推，直到找不到匹配的字符返回null，而後又從頭開始捕獲。 這個屬性能夠用來遍歷捕獲字符串中的子串。

var reg=/hello/g;
reg.lastIndex; //0
reg.exec("abchelloasdasdhelloasd"); // ["hello"]
reg.lastIndex; //8
reg.exec("abchelloasdasdhelloasd"); // ["hello"]
reg.lastIndex; //19
reg.exec("abchelloasdasdhelloasd"); // null
reg.lastIndex; //0

正則表達式基礎

元字符

 上面第一節以/hello/爲例，可是實際應用中可能會遇到這樣的需求： 匹配一串不肯定的數字、匹配開始的位置、匹配結束的位置、匹配空白符。此時就能夠用到元字符。

元字符：

//匹配數字:  \d
"ad3ad2ad".match(/\d/g);  // ["3", "2"]
//匹配除換行符之外的任意字符:  .
"a\nb\rc".match(/./g);  // ["a", "b", "c"]
//匹配字母或數字或下劃線 ： \w
"a5_  漢字@!-=".match(/\w/g);  // ["a", "5", "_"]
//匹配空白符:\s
"\n \r".match(/\s/g);  //[" ", " ", ""] 第一個結果是\n，最後一個結果是\r
//匹配【單詞開始或結束】的位置 ： \b
"how are you".match(/\b\w/g);  //["h", "a", "y"] 
// 匹配【字符串開始和結束】的位置:  開始 ^ 結束 $
"how are you".match(/^\w/g); // ["h"]

反義元字符，寫法就是把上面的小寫字母變成大寫的，好比 ， 匹配全部不是數字的字符： \D

另外還有一些用來表示重複的元字符，會在下面的內容中介紹。

字符範圍

在 [] 中使用符號 -  ，能夠用來表示字符範圍。如：

// 匹配字母 a-z 之間全部字母
/[a-z]/
// 匹配Unicode中 數字 0 到 字母 z 之間的全部字符
/[0-z]/ 
// unicode編碼查詢地址：
//https://en.wikibooks.org/wiki/Unicode/Character_reference/0000-0FFF
//根據上面的內容，咱們能夠找出漢字的Unicode編碼範圍是 \u4E00 到 \u9FA5，因此咱們能夠寫一個正則表達式來判斷一個字符串中是否有漢字
/[\u4E00-\u9FA5]/.test("測試");  // true 

重複 & 貪婪與懶惰

首先來說重複，當咱們但願匹配一些重複的字符時，就須要用到一些和重複相關的正則表達式，寫法以下

//重複n次 {n}
"test12".match(/test\d{3}/); // null
"test123".match(/test\d{3}/); // ["test123"]
//重複n次或更屢次  {n,}
"test123".match(/test\d{3,}/); //  ["test123"]
//重複n到m次
"test12".match(/test\d{3,5}/); //  null
"test12345".match(/test\d{3,5}/);  // ["test12345"]
"test12345678".match(/test\d{3,5}/);  // ["test12345"]
// 匹配字符test後邊跟着數字，數字重複0次或屢次
"test".match(/test\d*/); // ["test"]
"test123".match(/test\d*/); // ["test123"]
//重複一次或屢次
"test".match(/test\d+/) ; // null
"test1".match(/test\d*/); //["test1"]
//重複一次或0次
"test".match(/test\d?/) ; // null
"test1".match(/test\d?/); //["test1"]

從上面的結果能夠看到，字符test後邊跟着的數字能夠重複0次或屢次時，正則表達式捕獲的子字符串會返回儘可能多的數字，好比/test\d*/匹配 test123 ，返回的是test123，而不是test或者test12。

正則表達式捕獲字符串時，在知足條件的狀況下捕獲儘量多的字符串，這就是所謂的「貪婪模式」。

對應的」懶惰模式「，就是在知足條件的狀況下捕獲儘量少的字符串，使用懶惰模式的方法，就是在字符重複標識後面加上一個 "?"，寫法以下

// 數字重複3~5次，知足條件的狀況下返回儘量少的數字
"test12345".match(/test\d{3,5}?/);  //["test123"]
// 數字重複1次或更多，知足條件的狀況下只返回一個數字
"test12345".match(/test\d+?/);  // ["test1"]

字符轉義

在正則表達式中元字符是有特殊的含義的，當咱們要匹配元字符自己時，就須要用到字符轉義，好比：

/\./.test("."); // true

分組 & 分支條件

正則表達式能夠用 " ()  " 來進行分組，具備分組的正則表達式除了正則表達式總體會匹配子字符串外，分組中的正則表達式片斷也會匹配字符串。

分組按照嵌套關係和先後關係，每一個分組會分配獲得一個數字組號，在一些場景中能夠用組號來使用分組。

在 replace、match、exec函數中，分組都能體現不一樣的功能。

replace函數中，第二個參數裏邊能夠用 $+數字組號來指代第幾個分組的內容，如：

" the best language in the world is java ".replace(/(java)/,"$1script"); // " the best language in the world is javascript "
"/static/app1/js/index.js".replace(/(\/\w+)\.js/,"$1-v0.0.1.js"); //"/static/app1/js/index-v0.0.1.js"    (\/\w+)分組匹配的就是 /index ，在第二個參數中爲其添加上版本號

match函數中，當正則表達式有全局屬性時，會捕獲全部知足正則表達式的子字符串

"abchellodefhellog".match(/h(ell)o/g); //["hello", "hello"]

可是當正則表達式沒有全局屬性，且正則表達式中有分組的時候，match函數只會返回整個正則表達式匹配的第一個結果，同時會將分組匹配到的字符串也放入結果數組中：

"abchellodefhellog".match(/h(ell)o/); //["hello", "ell"]
// 咱們能夠用match函數來分解url，獲取協議、host、path、查詢字符串等信息
"http://www.baidu.com/test?t=5".match(/^((\w+):\/\/([\w\.]+))\/([^?]+)\?(\S+)$/);
// ["http://www.baidu.com/test?t=5", "http://www.baidu.com", "http", "www.baidu.com", "test", "t=5"]

exec函數在正則表達式中有分組的狀況下，表現和match函數很像，只是不管正則表達式是否有全局屬性，exec函數都只返回一個結果，並捕獲分組的結果

/h(ell)o/g.exec("abchellodefhellog"); //["hello", "ell"]

當正則表達式須要匹配幾種類型的結果時，能夠用到分支條件，例如

"asdasd hi  asdad hello asdasd".replace(/hi|hello/,"nihao"); //"asdasd nihao  asdad hello asdasd"
"asdasd hi  asdad hello asdasd".split(/hi|hello/); //["asdasd ", "  asdad ", " asdasd"]

 注意，分支條件影響它兩邊的全部內容， 好比 hi|hello  匹配的是hi或者hello，而不是 hiello 或者 hhello

分組中的分支條件不會影響分組外的內容

"abc acd  bbc bcd ".match(/(a|b)bc/g); //["abc", "bbc"]

 

後向引用

正則表達式的分組能夠在其後邊的語句中經過  \+數字組號來引用

好比

// 匹配重複的單詞
/(\b[a-zA-Z]+\b)\s+\1/.exec(" asd sf  hello hello asd"); //["hello hello", "hello"]

斷言

 (?:exp) , 用此方式定義的分組，正則表達式會匹配分組中的內容，可是再也不給此分組分配組號，此分組在replace、match等函數中的做用也會消失，效果以下：

/(hello)\sworld/.exec("asdadasd hello world asdasd")  // ["hello world", "hello"],正常捕獲結果字符串和分組字符串
/(?:hello)\sworld/.exec("asdadasd hello world asdasd")  // ["hello world"]

"/static/app1/js/index.js".replace(/(\/\w+)\.js/,"$1-v0.0.1.js"); //"/static/app1/js/index-v0.0.1.js"
"/static/app1/js/index.js".replace(/(?:\/\w+)\.js/,"$1-v0.0.1.js"); //"/static/app1/js$1-v0.0.1.js"

 

(?=exp) 這個分組用在正則表達式的後面，用來捕獲exp前面的字符，分組中的內容不會被捕獲，也不分配組號

/hello\s(?=world)/.exec("asdadasd hello world asdasd")  // ["hello "]

 

(?!exp)  和前面的斷言相反，用在正則表達式的後面，捕獲後面不是exp的字符，一樣不捕獲分組的內容，也不分配組號

/hello\s(?!world)/.exec("asdadasd hello world asdasd") //null

 

處理選項

javascript中正則表達式支持的正則表達式有三個，g、i、m，分別表明全局匹配、忽略大小寫、多行模式。三種屬性能夠自由組合共存。

// 全局匹配  g 
"abchelloasdasdhelloasd".match(/hello/);  //["hello"]
"abchelloasdasdhelloasd".match(/hello/g);  //["hello","hello"]

//忽略大小寫 i
"abchelloasdasdHelloasd".match(/hello/g); //["hello"]
"abchelloasdasdHelloasd".match(/hello/gi); //["hello","Hello"]

 

在默認的模式下，元字符 ^ 和 $ 分別匹配字符串的開頭和結尾處，模式 m 改變了這倆元字符的定義，讓他們匹配一行的開頭和結尾

"aadasd\nbasdc".match(/^[a-z]+$/g);  //null  字符串^和$之間有換行符，匹配不上 [a-z]+ ,故返回null
"aadasd\nbasdc".match(/^[a-z]+$/gm);  // ["aadasd", "basdc"] ，改變^$的含義，讓其匹配一行的開頭和末尾，能夠獲得兩行的結果