JavaScript正則表達式詳細總結
本文總體分兩部分：基礎知識 和 案例分析
第一部分 基礎知識
一、正則申明方式
1、構造函數方式
var reg = new RegExp('\d', 'gi');
- 通過 new 構造一個正則表達式對象，其中第一個參數 '\d' 是正則內容，第二個參數 'gi' 是修飾符。兩個參數皆為字符串類型
- 修飾符的作用是對匹配過程進行限定
- 修飾符有三種：i, g, m，可以同時出現，沒有順序（即 gi 與 ig 一樣），請參考下方說明
JavaScript正則表達式詳細總結
說明：
- [a-z] 表示從小寫字母a到小寫字母z之間的任意字符(含a和z)，下文會有詳細說明
- + 表示至少出現一次
- \n 在js中表示換行
- ^[a-z] 表示以任意小寫字母開頭的行
'aBcd efg'.match(/[a-z]+/);
// ["a"]
'aBcd efg'.match(/[a-z]+/i);
// ["aBcd"]
'aBcd efg'.match(/[a-z]+/g);
// ["a", "cd", "efg"]
'aBcd efg'.match(/[a-z]+/gi);
// ["aBcd", "efg"]
'aB\ncd\n efg'.match(/^[a-z]+/m);
// ["a"]
'aB\ncd\n efg'.match(/^[a-z]+/g);
// ["a"]
'aB\ncd\n efg'.match(/^[a-z]+/gm);
// ["a", "cd"]
// 注意不是 ["a", "cd", "efg"]
具體用法請看下文相關的示例
2、字面量方式
相比較上一種方式，這一種更為常見，上面示例也都使用了這種方式
var reg = /\d/gi;
兩個斜線內為正則的內容，後面可以跟修飾符，與第一種構造函數方式相比更簡潔，缺點是正則內容不能拼接，對於大多數場景倆說足夠了
二、正則相關符號
1、方括號 [] 用法
用於查找方括號內的任意字符：
JavaScript正則表達式詳細總結
注意：
1）^ 在 [] 內開始位置及正則雙斜線開始位置有特殊含義，其他位置表示 ^ 字符本身
- // 正則開頭位置表示以某某開頭的字符串，如下表示以大寫或小寫字母開頭的且連續為字母的字符串：
'adobe 2016'.match(/^[a-zA-Z]+/);
// ["adobe"]
- 在正則 或 匹配中(即 | 匹配)，表示 或者以某某字符開始的字符串，如下表示匹配 連續數字 或 以小寫字母開頭且連續為小寫字母的字符串，所以返回結果包含2016 和 adobe，注意返回結果不是 ["2016", "adobe"]
'adobe2016ps'.match(/\d+|^[a-z]+/g);
// ["adobe", "2016"]
- 在 [] 內開始位置時，表示不匹配 [] 內除 ^ 以外的所有字符：
'adobe'.match(/[^abc]/g);
// ["d", "o", "e"]
注： $ 與 ^ 的前兩個用法相似，只不過匹配的是以某某字符結尾的字符串，舉例：
'adobe 2016'.match(/\d+|[a-z]+$/g);
// ["2016"]
'adobe'.match(/\d+|[a-z]+$/g);
// ["adobe"]
2）- (連字符)表示左邊字符的 ASCII 值到右邊字符 ASCII 編碼值之間及左右字符自身的所有字符
'adobe PS 2016'.match(/[a-g]/g);
// ["a", "d", "b", "e"]
3）- 連字符左側的字符對應的 ASCII 值一定要小於或等於右側的字符，否則會報語法錯誤
'adobe'.match(/[z-a]/);
// Uncaught SyntaxError: Invalid regular expression: /[z-a]/: Range out of order in character class...
4）如果希望對連字符 - 本身進行匹配，需要用反斜線轉義
'adobe-2016'.match(/[a-g\-]/g);
// ["a", "d", "b", "e", "-"]
5）查看 ASCII 表就會發現，大寫字母的 ASCII 值是小於小寫字母的，因此下面用法會報語法錯誤
'adobe-2016'.match(/[a-Z]/g);
// Uncaught SyntaxError: Invalid regular expression: /[a-Z]/: Range out of order in character ...
那麼問題來了，如果要表示所有字母，不區分大小寫怎麼辦呢？其實有兩種方式：
A、第一種是使用修飾符 i，前面提到過。舉例：
'adobe-PS'.match(/[a-z]/gi);
// ["a", "d", "o", "b", "e", "P", "S"]
B、第二種是在正則中明確指明大小寫字母，舉例：
'adobe-PS'.match(/[a-zA-Z]/g);
// ["a", "d", "o", "b", "e", "P", "S"]
返回結果跟第一種一樣。當然這個例子有些特殊：匹配了所有大小寫字母。當只匹配部分大小寫字母的時候只能使用第二種方式，在此就不做示例了，讀者可以自己測試
6）匹配大小字母不能寫成 [A-z]，雖然不會報語法錯誤，但隱式的放大了匹配範圍，查看 ASCII 會發現，在大寫字母 Z 到小寫字母 a 之間還有 [、 \、 ]、 ^、 _、 ` 這6個字符，因此不能這麼寫。
7）想必有同學會問， \w 不也可以匹配字母麼？是的，\w 確實可以匹配字母，但跟上面說的一樣,也隱式的放大了匹配範圍，\w 除了匹配大小字母外還匹配了數字和下劃線，即 \w 與 [A-Za-z0-9_] 等價，當然 A-Z、a-z、0-9(等價於\d)、_這四組沒順序之分
2、特殊含義字符
- . 匹配任意單個字符，除換行和結束符
'1+0.2*2=1.4'.match(/.{2}/g);
// ["1+", "0.", "2*", "2=", "1."]
- \w 匹配任意單詞字符（數字、字母、下劃線），等價於[A-Za-z0-9_]
'ad34~!@$ps'.match(/\w/g);
// ["a", "d", "3", "4", "p", "s"]
- \W 匹配任意單詞字符，與\w相反，等價於[^A-Za-z0-9_]
'ad34~!@$ps'.match(/\W/g);
// ["~", "!", "@", "$"]
- \d 匹配數字，等價於 [0-9]
'ps6'.match(/\d/g);
// ["6"]
- \D 匹配非數字，等價於 [0-9]
'ps6'.match(/\D/g);
// ["p", "s"]
- \s 匹配空白字符，主要有(\n、\f、\r、\t、\v)，注意'a\sb'中的\s依然是字符s，所以'a\sb'.match(/\s/g)返回 null
'adobe ps'.match(/\s/g);
// [" "]
- \S 匹配非空白字符，與\s相反
'adobe ps'.match(/\S/g);
// ["a", "d", "o", "b", "e", "p", "s"]
- \b 匹配單詞邊界，注意連續的數字、字母或下劃線組成的字符串會認為一個單詞
'adobe(2016) ps6.4'.match(/\b(\w+)/g);
// ["adobe", "2016", "ps6", "4"]
- \B 匹配非單詞邊界，仔細體會下面的示例與\b的結果
'adobe(2016) ps6.4'.match(/\B(\w+)/g);
// ["dobe", "016", "s6"]
- \0 匹配NUL字符
'\0'.match(/\0/);
// ["NUL"]
- \n 匹配換行符（編碼：10，newline）
'adobe\nps'.match(/\n/).index;
// 5
- \f 匹配換頁符
'adobe\fps'.match(/\f/).index;
// 5
- \r 匹配回車符（編碼：13，return）
'adobe\rps'.match(/\r/).index;
// 5
- \t 匹配製表符，鍵盤tab對應的字符
'adobe\tps'.match(/\t/).index;
// 5
- \v 匹配垂直製表符
'adobe\vps'.match(/\v/).index;
// 5
- \\xxx 匹配以八進制數xxx規定的字符
'a'.charCodeAt(0).toString(8);
// "141"
'adobe ps'.match(/\141/g);
// ["a"]
- \\xdd 匹配以十六進制數dd規定的字符
'a'.charCodeAt(0).toString(16);
// "61"
'adobe ps'.match(/\\x61/g);
// ["a"]
- \\uxxxx 匹配以十六進制數xxxx規定的 Unicode字符，注意位數不夠需要補0
'a'.charCodeAt(0).toString(16);
// "61"
'adobe ps'.match(/\\u0061/g);
// ["a"]
注意：
window系統回車換行符為\r\n，linux系統下沒有\r，linux系統通過vi編輯器打開window系統的文本文件時候，經常在行尾出現^M符號，也就是\r的原因，解析文本的時候需要注意相關判斷。
3、量詞說明
- n+ 匹配包含至少一個n的字符串
'adobe paas'.match(/a+\w+/g);
// ["adobe", "aas"]
- n* 匹配包含零個或多個n的字符串
'ab3 aa12bb'.match(/a*\d+/g);
// ["3", "aa12"]
- n? 匹配包含零個或一個n的字符串
'ab3 aa12bb'.match(/a?\d+/g);
// ["3", "a12"]
- n{x} 匹配包含連續x個n的字符串
'ab3 aa12bb aaa34'.match(/a{2}\d+/g);
// ["aa12", "aa34"]
- n{x,y} 匹配包含至少連續x個且最多連續y個n的字符串
'a3 aaa12bb aaaaaaa34'.match(/a{2,4}\d+/g);
// ["aaa12", "aaaa34"]
- n{x,} 匹配包含至少連續x個n的字符串
'a3 aaa12bbaa4'.match(/a{2,}\d+/g);
// ["aaa12", "aa4"]
由上可知，以下 表達式1 與 表達式2 等價
JavaScript正則表達式詳細總結
4、符號說明
符號 {}、^、$、*、+、?、[]、[^]、- 已經在前面介紹過，接下來看下其他特殊字符
- a|b 匹配包含a或b的字符串
'adobe ps13'.match(/([a-g]+l\d+)/g);
// ["ad", "be", "13"]
- / 字面量方式申明正則時的界定符
'adobe'.match(/\w+/);
// ["adobe"]
- \ 普通反斜線字符
'a\\dobe'.match(/\\/);
// [""]
5、小括號 () 用法
正則在非全局(g)模式下，通過match方式，返回的數組第一個值整體匹配的字符串，其他值為通過括號分組匹配到的
1）捕獲用法
- 表示對匹配的字符串進行分組
'adobe cs9cs10, adobe cs11'.match(/([a-z]+\d+)+/);
// ["cs9cs10", "cs10"]
// 注意{2,}是對 括弧內的匹配 的描述
- 與|一起使用表示選擇性
"he is 12. she is 13. it's box".match(/(it|she|he)\s+is/g);
// ["he is", "she is"]
- 表示對匹配的字符串捕獲
'adobe cs9'.match(/[a-z]+\d+/);
// ["cs9"]
'adobe cs9'.match(/[a-z]+(\d+)/);
// ["cs9", "9"]
- 表示對匹配的字符串反向引用，引用從 \1 開始，從正則左側第一個左括號（當然要是閉合的括號才行）開始計算，每多一對括號，引用數加一，在非捕獲情況下不會加一。但正則比較複雜時，減少引用可以提升匹配性能，關於 非捕獲 下方會詳細介紹
引用的結果可以通過 構造函數 RegExp 獲取，即 RegExp.$1一直到 RegExp.$9
'Can you can a can as a canner can can a can?'.match(/([cC]an+)\s+\1/g);
// ["can can"]
// 注意 `\1` 等價於正則裡的 `([a-z]+)`，即與下面示例相同
'Can you can a can as a canner can can a can?'.match(/[cC]an+\s+[cC]an+/g);
// ["can can"]
// 如果把括弧去掉可以看下結果
'Can you can a can as a canner can can a can?'.match(/[cC]an+\s+\1/g);
// null
2）非捕獲用法，以(?)形式出現
- (?:n ) 表示非捕獲組
// 不使用括號時
'adobe12ps15test'.match(/[a-z]+\d+[a-z]+/);
// ["adobe12ps"]
// 使用括號分組
'adobe12ps15test'.match(/[a-z]+(\d+)([a-z]+)/);
// ["adobe12ps", "12", "ps"]
'adobe12ps15test'.match(/[a-z]+(?:\d+)([a-z]+)/);
// ["adobe12ps", "ps"]
// 看起來上面語句不用(?:)也可以得到相同結果，即：
'adobe12ps15test'.match(/[a-z]+\d+([a-z]+)/);
// ["adobe12ps", "ps"]
// 注意，但需求希望匹配字母之間的規則複雜時，如希望匹配字母，且字母之間可以為1或3時，但不需要1和3
'adobe11ps15test'.match(/[a-z]+(1|3)+([a-z]+)/);
// ["adobe11ps", "1", "ps"]
// 返回中不希望包含數字怎麼辦，可以使用非捕獲
'adobe11ps15test'.match(/[a-z]+(?:1|3)+([a-z]+)/);
// ["adobe11ps", "ps"]
- (?=n ) 匹配任何其後緊跟字符n的字符串，但返回中不包含n
'adobe12ps15test'.match(/[a-z]+(?=\d)/g);
// ["adobe", "ps"]
- (?!n ) 匹配任何其後沒有緊跟字符n的字符串，返回中不包含n
'adobe12ps15test'.match(/[a-z]+(?!\d)/g);
// ["adob", "p", "test"]
- (?<=n ) 匹配任何其前緊跟字符n的字符串，返回中不包含n
'adobe12ps15test'.match(/(?<=\d)[a-z]+/g);
// ["ps", "test"]
- (?
'adobe12ps15test'.match(/(? // ["adobe", "s", "est"]
3）注意
- A、如果希望對上面特殊字符本身進行匹配，需要在其前面添加\進行轉移
'11+2=13'.match(/\d+\+/g);
// ["11+"]
'(11+2)*2=26'.match(/\(\d+\+\d+\)/g);
// ["(11+2)"]
- B、\\舉例
// 注意下面兩個表達式返回的結果
'path C:\Windows\System32'.match(/([a-zA-Z]:\\\w+)/g);
// null
'path C:\\Windows\\System32'.match(/([a-zA-Z]:\\\w+)/g);
// ["C:\Windows"]
說明:
在申明字符串 'path C:\Windows\System32' 時，其中的 '' 就已經被當做轉移符，既是 '\W' === 'W',所以如果希望申明的字符串中包含反斜線，需要在加一個反斜線轉義，即 \\
6、正則相關方法
1） RegExp對象相關方法
JavaScript正則表達式詳細總結
2）String對象相關方法
JavaScript正則表達式詳細總結
3）replace 具體用法
顧名思義，是字符串替換方法，但用法比較廣泛，相信讀者已經非常熟悉了。在此就當複習了
A、 基本用法
直接傳入字符串進行替換，找到子串後只替換一次，舉例：
'adobe abc'.replace('b', '_')
// "ado_e abc"
// 注意 第二個 b 沒有被替換
如果希望全部替換，可以使用正則表達式並用全局修飾符 g 方式，舉例：
'adobe abc'.replace(/b/g, '_')
// "ado_e a_c"
B、 高級用法
第二個參數可以使用 function，其中有三個參數，分別為 匹配的字符串、當前匹配的字符串index值、匹配的源字符串，最終結果根據每次匹配結果進行相應的替換
舉例：
'adobe aacc bbaa'.replace(/a+/g, function(str, index, source){
if(index > 0){
return str.toUpperCase();
} else {
return str;
}
});
// "adobe AAcc bbAA"
第二部分 案例分析
一、常見匹配
在寫正則之前，需要注意以下幾點：
- 一定要清楚期望的規則是什麼，不然無從匹配
- 有些正則不只一種寫法，要注意簡短幹練，複雜的正則表達式不僅難懂，而且容易出BUG，性能也不是很好
- 正則雖好，可要適度奧。有些字符串處理不一定適合用正則
1、手機號
規則：以1開頭第二位為3、5、7、8且長度為11位的數字組合
/^1[3578]\d{9}$/.test(13600001111);
// true
2、 字符串提取
舉例：提取字符串中的數字
分析：
根據對數字的理解，可能為負數，即-?，如果是負數，其後需要是數字且至少一位，即 -?\d+，小數部分可能有也可能沒有，所以需要對小數部分括弧起來用 ? 或 {0, 1}限定，因為.是特殊字符需要轉義，於是表達式為：-?\d+(\.\d+)?
'(12.3 - 32.3)*2 = -40'.match(/-?\d+(\.\d+)?/g);
// ["12.3", "32.3", "2", "-40"]
二、jQuery中的正則片段
1、表達式
在jQuery 3.1.2-pre中找到一個解析單標籤的正則，如下：
/^:\\x20\t\r\n\f]*)[\\x20\t\r\n\f]*\/?>(?:|)$/i
2、分解
乍一看有點懵，其實拆解之後就容易理解了，注意拆解的步驟，通常來說：
1） 第一步可以先看括號 () ，可以將各個小括號及非括號的分成不同部分，如
/^< ([a-z][^\/\0>:\\x20\t\r\n\f]*) [\\x20\t\r\n\f]*\/?> (?:|) $/i
2） 第二步可以將中括號分開
/^< ( [a-z] [^\/\0>:\\x20\t\r\n\f]* ) [\\x20\t\r\n\f]* \/?> (?:|) $/i
現在是不是已經很清楚了，接下來分解下，就很容易理解了
3、詳解
- 1）^< 很明顯在匹配標籤左尖括號括號，且以其開始
- 2）( [a-z] [^\/\0>:\\x20\t\r\n\f]* ) 這個括號有兩部分，第一個 [a-z] 沒什麼好解釋，即標籤:\\x20\t\r\n\f]*，及限制標籤名必須以字母開始，且第二個字母不能為/ \0 > : \20 t\r \n \f的任意多個字符（思考為什麼），() 表示對標籤的分組，方便取到標籤名
- 3）[\\x20\t\r\n\f]* 表示可能含有 [\\x20\t\r\n\f] 這些特殊字符，與前面的 [^\/\0>:\\x20\t\r\n\f]* 相似卻不一樣，通過這裡可以看出
- 4）\/?> 能匹配
或 - 5）(?:|) 這裡不捕獲，並用\1去反向引用第一個括號的表達式 ([a-z][^\/\0>:\\x20\t\r\n\f]*)。這裡的|表示 可有可無，即：(?:|) 與 (?:)?匹配結果一樣
公告
閱讀更多 web秀 的文章
