讀這篇文章之前你需要掌握基本的JavaScript知識，並且有安靜舒適的環境與寬裕的時間，文章有點長，你可以選擇備好coffee或茶來慢慢學習。
文章標題有點誇大了，這是一篇正規表示式的入門文章。如有錯誤，歡迎指正。
概念和語法
REGEXP物件
JavaScript 通過內建物件RegExp支援正規表示式，有兩種方法例項化RegExp物件
1.字面量 2.建構函式
字面量
var reg = /is /g //匹配單詞is g是global 進行全文搜尋匹配
沒有g：
var reg = /is/;
//只替換第一項
`He is a boy. This is a dog. Where is she?`.replace(reg,`IS`);
"He IS a boy. This is a dog. Where is she?"
有g：
var reg = /is/g;
//替換了所有的
`He is a boy. This is a dog. Where is she?`.replace(reg,`IS`);
"He IS a boy. This IS a dog. Where IS she?"建構函式
var reg = new RegExp( `\bis\b` , `g`); //同樣，如果不加g 則只替換第一項
修飾符
g：global 全文搜尋，不新增，搜尋到第一個匹配停止
i：ignore case 忽略大小寫，預設大小寫敏感
m：multiplelines 多行搜尋
//未忽略大小寫
`He is a boy. Is he?`.replace(/is/g, `0`);
"He 0 a boy. Is he?"
//忽略大小寫
`He is a boy. Is he?`.replace(/is/gi, `0`);
"He 0 a boy. 0 he?"元字元
·正規表示式由兩種基本字元型別組成：
-
原義文字字元
-
元字元
·元字元是在正規表示式中有特殊含義的非字母字元
`· * + ? $ ^ . / () {} []`
字元類
我們可以使用元字元 [] 來構建一個簡單的類
所謂類是指符合某些特性的物件，一個泛指，而不是特指某個字元
表示式[abc] 把字元a或b或c歸為一類，表示式可以匹配這類的字元（one of）
`a1b2c3d4`.replace(/[abc]/g,`X`)
"X1X2X3d4"字元類取反
使用元字元^建立 反向類/負向類
`a1b2c3d4`.replace(/[^abc]/g,`X`)
"aXbXcXXX"範圍類
正規表示式還提供了 範圍類
所以我們可以使用 [a-z] 來連線兩個字元表示 從a到z的任意字元
這是個閉區間，也就是包含a和z本身
`a1b2d3x4z9`.replace(/[a-z]/g,`Q`)
"Q1Q2Q3Q4Q9"在[]組成的類內部是可以連寫的[a-zA-Z] (one of)
`a1b2d3x4z9AJHGK`.replace(/[a-zA-Z]/g,`Q`)
"Q1Q2Q3Q4Q9QQQQQ"中劃線：如果是在裡面 如[a-z]，就表示範圍的意思，如果想匹配中劃線，在後面加
`2016-09-12`.replace(/[0-9-]/g,`A`)
"AAAAAAAAAA"預定義類
正規表示式提供 預定義類 來匹配常見的字元類
字元 . 等價類
[^除了回車符和換行符之外的所有字元
]d [0-9] 數字字元 D [^0-9] 非數字字元 s 空白符 S非空白符 w 單詞字元（字母、數字下劃線） W 非單詞字元 abd. //ab+數字+任意字元
邊界
正規表示式還提供了幾個常用的邊界匹配字元
^ 以xxx開始
$ 以xxx結束
單詞邊界
B 非單詞邊界
`@123@abc@`.replace(/@./g, `Q`)
"Q23Qbc@"
`@123@abc@`.replace(/^@./g, `Q`)
"Q23@abc@"
`@123@abc@`.replace(/.@/g, `Q`)
"@12QabQ"
`@123@abc@`.replace(/.@$/g, `Q`)
"@123@abQ"量詞
我們希望匹配一個連續出現20次數字的字串
+ 出現一次或多次（至少出現一次）
* 出現零次或多次（任意次）
{n} 出現n次
{n,m}出現n到m次
{n,}至少出現n次
貪婪模式
d{3,6} 12345678
//儘可能多的匹配
`12345678`.replace(/d{3,6}/g,`X`)
"X78"非貪婪模式
讓正規表示式儘可能少的匹配，也就是說一旦成功匹配不再繼續嘗試就是非貪婪模式
//在量詞後加上？即可 如下面的為3個一組
`12345678`.replace(/d{3,6}?/g,`X`)
"XX78"分組
匹配字串Byron連續出現3次的場景Byron{3} 只是將n重複三次
使用()可以達到分組的功能，使量詞作用於分組(Byron){3} 是將Byron重複三次
//錯誤的
`a1b2c3d4`.replace(/[a-z]d{3}/g,`X`)
"a1b2c3d4"
//正確的
`a1b2c3d4`.replace(/([a-z]d){3}/g,`X`)
"Xd4"或
使用 | 可以達到或的效果
//示例一
`ByronCasper`.replace(/Byron|Casper/g,`X`)
"XX"
//示例二(分組和或配合使用)
`ByronsperByrCasper`.replace(/Byr(on|Ca)sper/g,`X`)
"XX"反向引用
2016-08-12 => 08/12/2016
//分組捕獲
`2016-08-12`.replace(/(d{4})-(d{2})-(d{2})/g,`$1`)
"2016"
`2016-08-12`.replace(/(d{4})-(d{2})-(d{2})/g,`$2/$3/$1`)
"08/12/2016"忽略分組
不希望捕獲某些分組，只需要在分組內加上？：就可以(?:Byron).(ok)
前瞻
正規表示式從文字頭部向尾部開始解析，文字尾部方向，稱為“前”
前瞻就是在正規表示式匹配到規則的時候，向前檢查是否符合斷言，
後顧/後瞻方向相反
正向前瞻 exp(?=assert)
負向前瞻 exp(?!assert)
//單詞後面是數字
`a2*3`.replace(/w(?=d)/g,`X`)
"X2*3"
`a2*34v8`.replace(/w(?=d)/g,`X`)
"X2*X4X8"
//單詞後面不是數字
`a2*34vv`.replace(/w(?!d)/g,`X`)
"aX*3XXX"物件屬性
物件屬性是隻讀的
global：是否全文搜尋，預設false
ignore case：是否大小寫敏感，預設是false
multiline：多行搜尋，預設值是false
lastIndex：是當前表示式匹配內容的最後一個字元的下一個位置
source：正規表示式的文字字串
test和exec方法
RegExp.prototype.test(str)
用於測試字串引數中是否存在匹配正規表示式模式的字串
如果存在則返回true，否則返回false
var reg1 = /w/;
reg1.test(`a`)
true
reg1.test(`$`)
false
但是如果這樣：
var reg2 = /w/g;
//第一次
reg1.test(`ab`)
true
//第二次
reg1.test(`ab`)
true
//第三次
reg1.test(`ab`)
false這是lastIndex在作怪！
第一次匹配的時候當前匹配內容為a，最後一個字元也是a本身，下一個位置為b前面；
第二次匹配的時候當前匹配內容為b，最後一個字元也是b本身，下一個位置為b後面；
第三次匹配的時候當前匹配內容為空，最後一個字元也是空本身，下一個位置重置為a前面。
解決方法：
①每次都例項化一個新物件
(/w/g).test(`ab`) 這樣就能每次都是true，但是會產生記憶體開銷，不採用！②如果想用test本意的話，不用加g，只需檢測有沒有就可以了。
RegExp.prototype.exec(str)
使用正規表示式模式對字串執行搜尋，並將更新全域性RegExp物件的屬性以反映匹配結果
如果沒有匹配的文字則返回null，否則返回一個結果陣列：
– index 宣告匹配文字的第一個字元的位置
– input 存放被檢索的字串 string
非全域性呼叫
呼叫非全域性的RegExp物件的exec()時，返回陣列
第一個元素是與正規表示式相匹配的文字
第二個元素是與RegExpObject的第一個子表示式相匹配的文字（如果有的話）
第三個元素是與RegExp物件的第二個子表示式相匹配的文字（如果有的話），以此類推
var reg3 = /d(w)(w)d/;
var reg4 = /d(w)(w)d/g;
var ts = `$1az2bb3cy4dd5ee`;
var ret = reg3.exec(ts);
//在非全域性下 lastIndex失效
console.log(reg3.lastIndex + ` ` + ret.index + ` ` + ret.toString());
console.log(reg3.lastIndex + ` ` + ret.index + ` ` + ret.toString());
while(ret = reg4.exec(ts)){
console.log(reg4.lastIndex + ` ` + ret.index + ` ` + ret.toString());
}
//結果：
"0 1 1az2,a,z"
"0 1 1az2,a,z"
"5 1 1az2,a,z"
"11 7 3cy4,c,y"字串物件方法
Stringl.protatype.search(reg)
search()方法用於檢索字串中指定的子字串，或檢索與正規表示式相匹配的子字串
方法返回第一個匹配結果index，查詢不到返回 -1
search()方法不執行全域性匹配，它將忽略標誌g，並且總是從字串的開始進行檢索
String.prototype.match(reg)
match()方法將檢索字串，以找到一個或多個與regexp匹配的文字
regexp是否具有標誌g對結果影響很大
非全域性呼叫
如果regexp沒有標誌g，那麼match()方法就只能在字串中執行一次匹配
如果沒有找到任何匹配的文字，將返回null
否則它將返回一個陣列，其中存放了與它找到的匹配文字有關的資訊
返回陣列的第一個元素存放的是匹配文字，而其餘的元素存放的是與正規表示式的子表示式匹配的文字
除了常規的陣列元素之外，返回的陣列還含有2個物件屬性
-
index 宣告匹配文字的起始字元在字串的位置
-
input 宣告對stringObject的引用
var reg3 = /d(w)d/;
var reg4 = /d(w)d/g;
var ts = `$1a2b3c4d5e`;
var ret = ts.match(reg3);
console.log(ret);
console.log(ret.index + ` ` + reg3.lastIndex);
//結果
["1a2", "a"]
"1 0"全域性呼叫
如果regexp具有標誌g則match()方法將執行全域性檢索，找到字串中的所有匹配字串
沒有找到任何匹配的子串，則返回null
如果找到了一個或多個匹配子串，則返回一個陣列
陣列元素中存放的是字串中所有的匹配子串，而且也沒有index屬性或input屬性
ret = ts.match(reg4);
console.log(ret);
console.log(ret.index + ` ` + reg3.lastIndex);
//結果
["1a2", "3c4"]
"undefined 0"String.prototype.split(reg)
我們經常使用split方法把字串分割為字元陣列`a,b,c,d`.split(`,`); //["a","b","c","d"]
在一些複雜的分割情況下我們可以使用正規表示式解決`a1b2c3d`.split(/d/); //["a","b","c","d"]
String.prototype.replace
String.prototype.replace(str,replaceStr)
String.prototype.replace(reg,replaceStr)
String.prototype.replace(reg,function)
function引數含義
function會在每次匹配替換的時候呼叫，有四個引數
①匹配字串
②正規表示式分組內容，沒有分組則沒有該引數
③匹配項在字串中的index
④原字串
`a1b2c3d4e5`.replace(/d/g, function(match,index,origin){
console.log(index);
return parseInt(match) + 1;
});
//結果
1
3
5
7
9
"a2b3c4d5e6"
`a1b2c3d4e5`.replace(/(d)(w)(d)/g, function(match,group1,group2,group3,index,origin){
console.log(match);
return group1 + group3;
});
//結果
"1b2"
"3d4"
"a12c34e5"希望能對你有所幫助，更好的運用正則來解決問題！
附：
1.正規表示式檢測網站：(https://regexper.com/)
2.JSBin：(http://jsbin.com/?js,console)
部落格地址：(http://fehey.com/2016/08/12/r… )
歡迎前端小夥伴交流~