js的正則詳細教程（一）
1.1. 兩種模糊匹配
若是正則只有精確匹配是沒多大意義的，好比 /hello/，也只能匹配字符串中的 "hello" 這個子串。javascript
var regex = /hello/;
console.log( regex.test("hello") );
// => true
複製代碼
正則表達式之因此強大，是由於其能實現模糊匹配。 而模糊匹配，有兩個方向上的「模糊」:橫向模糊和縱向模糊。html
1.1.1. 橫向模糊匹配
橫向模糊指的是，一個正則可匹配的字符串的長度不是固定的，能夠是多種狀況的。java
其實現的方式是使用量詞。譬如 {m,n}，表示連續出現最少 m 次，最多 n 次。正則表達式
好比正則 /ab{2,5}c/ 表示匹配這樣一個字符串:第一個字符是 "a"，接下來是 2 到 5 個字符 "b"，最後 是字符 "c"。express
var regex = /ab{2,5}c/g;
var string = "abc abbc abbbc abbbbc abbbbbc abbbbbbc";
console.log( string.match(regex) );
// => ["abbc", "abbbc", "abbbbc", "abbbbbc"]
複製代碼
案例中用的正則是 /ab{2,5}c/g，其中 g 是正則的一個修飾符。表示全局匹配，即，在目 NOTE 標字符串中按順序找到知足匹配模式的全部子串，強調的是「全部」，而不僅是「第一個」 。g 是單詞 global 的首字母。數組
1.1.2. 縱向模糊匹配
縱向模糊指的是，一個正則匹配的字符串，具體到某一位字符時，它能夠不是某個肯定的字符，能夠有多種 可能。bash
其實現的方式是使用字符組。譬如 [abc]，表示該字符是能夠字符 "a"、"b"、"c" 中的任何一個。ide
好比 /a[123]b/ 能夠匹配以下三種字符串: "a1b"、"a2b"、"a3b"。函數
var regex = /a[123]b/g;
var string = "a0b a1b a2b a3b a4b";
console.log( string.match(regex) );
// => ["a1b", "a2b", "a3b"]
複製代碼
1.2. 字符組
須要強調的是，雖叫字符組(字符類)，但只是其中一個字符。 例如 [abc]，表示匹配一個字符，它能夠是 "a"、"b"、"c" 之一。post
1.2.1. 範圍表示法
好比 [123456abcdefGHIJKLM]，能夠寫成 [1-6a-fG-M]。用連字符 - 來省略和簡寫。
由於連字符有特殊用途，那麼要匹配 "a"、"-"、"z" 這三者中任意一個字符，該怎麼作呢?
不能寫成 [a-z]，由於其表示小寫字符中的任何一個字符。
能夠寫成以下的方式:[-az] 或 [az-] 或 [a-z]。
1.2.2. 排除字符組
縱向模糊匹配，還有一種情形就是，某位字符能夠是任何東西，但就不能是 "a"、"b"、"c"。
此時就是排除字符組(反義字符組)的概念。例如 [^abc]，表示是一個除 "a"、"b"、"c"以外的任意一個字 符。字符組的第一位放 ^(脫字符)，表示求反的概念。
1.2.3. 常見的簡寫形式
若是要匹配任意字符怎麼辦?可使用 [\d\D]、[\w\W]、[\s\S] 和 [^] 中任何的一個。
1.3. 量詞
1.3.1. 簡寫形式
1.3.2. 貪婪匹配與惰性匹配
var regex = /\d{2,5}/g;
var string = "123 1234 12345 123456";
console.log( string.match(regex) );
// => ["123", "1234", "12345", "12345"]
複製代碼
其中正則 /\d{2,5}/，表示數字連續出現 2 到 5 次。會匹配 2 位、3 位、4 位、5 位連續數字。
可是其是貪婪的，它會盡量多的匹配。你能給我 6 個，我就要 5 個。你能給我 3 個，我就要 3 個。 反正只要在能力範圍內，越多越好。
var regex = /\d{2,5}?/g;
var string = "123 1234 12345 123456";
console.log( string.match(regex) );
// => ["12", "12", "34", "12", "34", "12", "34", "56"]
複製代碼
其中 /\d{2,5}?/ 表示，雖然 2 到 5 次都行，當 2 個就夠的時候，就再也不往下嘗試了。
對惰性匹配的記憶方式是:量詞後面加個問號，問一問你滿足了嗎，你很貪婪嗎?
1.4. 多選分支
(p1|p2|p3)，其中 p一、p2 和 p3 是子模式，用 |(管道符)分隔，表示其中任何之一。
例如要匹配字符串 "good" 和 "nice" 可使用 /good|nice/。
var regex = /good|nice/g;
var string = "good idea, nice try.";
console.log( string.match(regex) );
// => ["good", "nice"]
複製代碼
但有個事實咱們應該注意，好比我用 /good|goodbye/，去匹配 "goodbye" 字符串時，結果是 "good":
var regex = /good|goodbye/g;
var string = "goodbye";
console.log( string.match(regex) );
// => ["good"]
複製代碼
而把正則改爲 /goodbye|good/，結果是:
var regex = /goodbye|good/g;
var string = "goodbye";
console.log( string.match(regex) );
// => ["goodbye"]
複製代碼
也就是說，分支結構也是惰性的，即當前面的匹配上了，後面的就再也不嘗試了。
1.5. 案例分析
1.5.1. 匹配 16 進制顏色值
要求匹配: #ffbbad #Fc01DF #FFF #ffE
表示一個 16 進制字符，能夠用字符組 [0-9a-fA-F]。
其中字符能夠出現 3 或 6 次，須要是用量詞和分支結構。
使用分支結構時，須要注意順序。
var regex = /#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})/g;
var string = "#ffbbad #Fc01DF #FFF #ffE";
console.log( string.match(regex) );
// => ["#ffbbad", "#Fc01DF", "#FFF", "#ffE"]
複製代碼
1.5.2. 匹配時間
23:59 02:07
複製代碼
分析: 共 4 位數字，第一位數字能夠爲 [0-2]。
當第 1 位爲 "2" 時，第 2 位能夠爲 [0-3]，其餘狀況時，第 2 位爲 [0-9]。
第 3 位數字爲 [0-5]，第4位爲 [0-9]。
var regex = /^([01][0-9]|[2][0-3]):[0-5][0-9]$/;
console.log( regex.test("23:59") );
console.log( regex.test("02:07") );
// => true
// => true
複製代碼
正則中使用了 ^ 和 $，分別表示字符串開頭和結尾。
若是也要求匹配 "7:9"，也就是說時分前面的 "0" 能夠省略。
var regex = /^(0?[0-9]|1[0-9]|[2][0-3]):(0?[0-9]|[1-5][0-9])$/;
console.log( regex.test("23:59") );
console.log( regex.test("02:07") );
console.log( regex.test("7:9") );
// => true
// => true
// => true
複製代碼
1.5.3. 匹配日期
好比 yyyy-mm-dd 格式爲例。
2017-06-10
年，四位數字便可，可用 [0-9]{4}。
月，共 12 個月，分兩種狀況 "01"、"02"、...、"09" 和 "10"、"11"、"12"，可用 (0[1-9]|1[0-2])。
日，最大 31 天，可用 (0[1-9]|[12][0-9]|3[01])。
var regex = /^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/;
console.log( regex.test("2017-06-10") );
// => true
複製代碼
1.5.4. window 操做系統文件路徑
F:\study\javascript\regex\regular expression.pdf
F:\study\javascript\regex\
F:\study\javascript
F:\
盤符:\文件夾\文件夾\文件夾\
複製代碼
其中匹配 "F:"，須要使用 [a-zA-Z]:\，其中盤符不區分大小寫，注意 \ 字符須要轉義。
文件名或者文件夾名，不能包含一些特殊字符，此時咱們須要排除字符組 [^\:*<>|"?\r\n/] 來表示合法 字符。
另外它們的名字不能爲空名，至少有一個字符，也就是要使用量詞 +。所以匹配 文件夾\，可用 [^\:*<>|"?\r\n/]+\。
另外 文件夾\，能夠出現任意次。也就是 ([^\:<>|"?\r\n/]+\)。其中括號表示其內部正則是一個總體。
路徑的最後一部分能夠是 文件夾，沒有 \，所以須要添加 ([^\:*<>|"?\r\n/]+)?。
var regex = /^[a-zA-Z]:\\([^\\:*<>|"?\r\n/]+\\)*([^\\:*<>|"?\r\n/]+)?$/;
console.log( regex.test("F:\\study\\javascript\\regex\\regular expression.pdf") );
console.log( regex.test("F:\\study\\javascript\\regex\\") );
console.log( regex.test("F:\\study\\javascript") );
console.log( regex.test("F:\\") );
// => true
// => true
// => true
// => true
複製代碼
1.5.5. 匹配 id
要求從
<div id="container" class="main"></div>
複製代碼
提取出 id="container"。
可能最開始想到的正則是:
var regex = /id=".*"/
var string = '<div id="container" class="main"></div>';
console.log(string.match(regex)[0]);
// => id="container" class="main"
複製代碼
由於 . 是通配符，自己就匹配雙引號的，而量詞 * 又是貪婪的，當遇到 container 後面雙引號時，是不會 停下來，會繼續匹配，直到遇到最後一個雙引號爲止。
解決之道，可使用惰性匹配:
var regex = /id=".*?"/
var string = '<div id="container" class="main"></div>';
console.log(string.match(regex)[0]);
// => id="container"
複製代碼
固然，這樣也會有個問題。效率比較低，由於其匹配原理會涉及到「回溯」這個概念
var regex = /id="[^"]*"/ var string = '<div id="container" class="main"></div>'; console.log(string.match(regex)[0]); // => id="container" 複製代碼
2 正則表達式位置匹配攻略
2.2. 什麼是位置呢?
在 ES5 中，共有 6 個錨:
^、$、\b、\B、(?=p)、(?!p)
相應的可視化形式是:
2.2.1. ^ 和 $
^(脫字符)匹配開頭，在多行匹配中匹配行開頭。
$(美圓符號)匹配結尾，在多行匹配中匹配行結尾。
好比咱們把字符串的開頭和結尾用 "#" 替換(位置能夠替換成字符的!):
var result = "hello".replace(/^|$/g, '#');
console.log(result);
// => "#hello#"
複製代碼
多行匹配模式(即有修飾符 m)時，兩者是行的概念，這一點須要咱們注意:
var result = "I\nlove\njavascript".replace(/^|$/gm, '#');
console.log(result);
/*
#I#
#love#
#javascript#
*/
複製代碼
2.2.2. \b 和 \B
\b 是單詞邊界，具體就是 \w 與 \W 之間的位置，也包括 \w 與 ^ 之間的位置，和 \w 與 $ 之間的位置。
好比考察文件名 "[JS] Lesson_01.mp4" 中的 \b，以下:
var result = "[JS] Lesson_01.mp4".replace(/\b/g, '#');
console.log(result);
// => "[#JS#] #Lesson_01#.#mp4#"
複製代碼
爲何是這樣呢?這須要仔細看看。
首先，咱們知道，\w 是字符組 [0-9a-zA-Z_] 的簡寫形式，即 \w 是字母數字或者下劃線的中任何一個字 符。而 \W 是排除字符組 [^0-9a-zA-Z_] 的簡寫形式，即 \W 是 \w 之外的任何一個字符。
第 1 個，兩邊字符是 "[" 與 "J"，是 \W 與 \w 之間的位置。
第 2 個，兩邊字符是 "S" 與 "]"，也就是 \w 與 \W 之間的位置。
第 3 個，兩邊字符是空格與 "L"，也就是 \W 與 \w 之間的位置。
第 4 個，兩邊字符是 "1" 與 "."，也就是 \w 與 \W 之間的位置
第 5 個，兩邊字符是 "." 與 "m"，也就是 \W 與 \w之間的位置。
第 6 個，位於結尾，前面的字符 "4" 是 \w，即 \w 與 $ 之間的位置。
知道了 \b 的概念後，那麼 \B 也就相對好理解了。
\B 就是 \b 的反面的意思，非單詞邊界。例如在字符串中全部位置中，扣掉 \b，剩下的都是 \B 的。 具體說來就是 \w 與 \w、 \W 與 \W、^ 與 \W，\W 與 $ 之間的位置。
var result = "[JS] Lesson_01.mp4".replace(/\B/g, '#');
console.log(result);
// => "#[J#S]# L#e#s#s#o#n#_#0#1.m#p#4"
複製代碼
2.2.3. (?=p) 和 (?!p)
(?=p)，其中 p 是一個子模式，即 p 前面的位置，或者說，該位置後面的字符要匹配 p。
好比 (?=l)，表示 "l" 字符前面的位置，例如:
var result = "hello".replace(/(?=l)/g, '#');
console.log(result);
// => "he#l#lo"
複製代碼
而 (?!p) 就是 (?=p) 的反面意思，好比:
var result = "hello".replace(/(?!l)/g, '#');
console.log(result);
// => "#h#ell#o#"
複製代碼
2.3. 位置的特性
對於位置的理解，咱們能夠理解成空字符 ""。
好比 "hello" 字符串等價於以下的形式:
"hello" == "" + "h" + "" + "e" + "" + "l" + "" + "l" + "o" + ""
也等價於:
"hello" == "" + "" + "hello"
所以，把 /\^hello$/ 寫成 /^^hello$$$/，是沒有任何問題的:
var result = /^^hello$$$/.test("hello");
console.log(result);
// => true
甚至能夠寫成更復雜的:
var result = /(?=he)^^he(?=\w)llo$\b\b$/.test("hello");
console.log(result);
// => true
複製代碼
2.4. 相關案例
2.4.1. 不匹配任何東西的正則
讓你寫個正則不匹配任何東西
easy，/.^/。
由於此正則要求只有一個字符，但該字符後面是開頭，而這樣的字符串是不存在的。
2.4.2 數字的千位分隔符表示法
好比把 "12345678"，變成 "12,345,678"。
可見是須要把相應的位置替換成 ","。
思路是什麼呢?
2.4.2.1. 弄出最後一個逗號
使用 (?=\d{3}$) 就能夠作到:
var result = "12345678".replace(/(?=\d{3}$)/g, ',')
console.log(result);
// => "12345,678"
其中，(?=\d{3}$) 匹配 \d{3}$ 前面的位置。而 \d{3}$ 匹配的是目標字符串最後那 3 位數字
複製代碼
2.4.2.2. 弄出全部的逗號
由於逗號出現的位置，要求後面 3 個數字一組，也就是 \d{3} 至少出現一次。 此時可使用量詞 +:
var result = "12345678".replace(/(?=(\d{3})+$)/g, ',')
console.log(result);
// => "12,345,678"
複製代碼
2.4.2.3. 匹配其他案例
寫完正則後，要多驗證幾個案例，此時咱們會發現問題:
var result = "123456789".replace(/(?=(\d{3})+$)/g, ',')
console.log(result);
// => ",123,456,789"
複製代碼
由於上面的正則，僅僅表示把從結尾向前數，一可是 3 的倍數，就把其前面的位置替換成逗號。所以纔會出 現這個問題。
怎麼解決呢?咱們要求匹配的到這個位置不能是開頭。
咱們知道匹配開頭可使用 ^，但要求這個位置不是開頭怎麼辦?
easy，(?!^)，你想到了嗎?測試以下:
這樣取得是交集
var regex = /(?!^)(?=(\d{3})+$)/g;
var result = "12345678".replace(regex, ',')
console.log(result);
// => "12,345,678"
result = "123456789".replace(regex, ',');
console.log(result);
// => "123,456,789"
複製代碼
2.4.2.4. 支持其餘形式
若是要把 "12345678 123456789" 替換成 "12,345,678 123,456,789"。
此時咱們須要修改正則，把裏面的開頭 ^ 和結尾 $，修改爲 \b:
var string = "12345678 123456789",
regex = /(?!\b)(?=(\d{3})+\b)/g;
var result = string.replace(regex, ',')
console.log(result);
// => "12,345,678 123,456,789"
複製代碼
其中 (?!\b) 怎麼理解呢?
要求當前是一個位置，但不是 \b 前面的位置，其實 (?!\b) 說的就是 \B。
所以最終正則變成了:/\B(?=(\d{3})+\b)/g。
2.4.2.5. 格式化
千分符表示法一個常見的應用就是貨幣格式化。
好比把下面的字符串:1888 格式化成:$ 1888.00
function format (num) {
return num.toFixed(2).replace(/\B(?=(\d{3})+\b)/, ",").replace(/^/, "$$ ");
};
console.log( format(1888) );
// => "$ 1,888.00"
複製代碼
2.4.3. 驗證密碼問題
密碼長度 6-12 位，由數字、小寫字符和大寫字母組成，但必須至少包括 2 種字符。
此題，若是寫成多個正則來判斷，比較容易。但要寫成一個正則就比較困難。
不考慮「但必須至少包括 2 種字符」這一條件。咱們能夠容易寫出:
var regex = /^[0-9A-Za-z]{6,12}$/;
複製代碼
判斷是否包含有某一種字符
假設，要求的必須包含數字，怎麼辦?此時咱們可使用 (?=.*[0-9]) 來作。
var regex = /(?=.*[0-9])^[0-9A-Za-z]{6,12}$/;
同時包含具體兩種字符
var regex = /(?=.*[0-9])(?=.*[a-z])^[0-9A-Za-z]{6,12}$/;
複製代碼
咱們能夠把原題變成下列幾種狀況之一:
• 同時包含數字和小寫字母
• 同時包含數字和大寫字母
• 同時包含小寫字母和大寫字母
• 同時包含數字、小寫字母和大寫字母
最終答案是:
var regex = /((?=.*[0-9])(?=.*[a-z])|(?=.*[0-9])(?=.*[A-Z])|(?=.*[a-z])(?=.*[A- Z]))^[0-9A-Za-z]{6,12}$/;
console.log( regex.test("1234567") ); // false 全是數字
console.log( regex.test("abcdef") ); // false 全是小寫字母
console.log( regex.test("ABCDEFGH") ); // false 全是大寫字母
console.log( regex.test("ab23C") ); // false 不足6位
console.log( regex.test("ABCDEF234") ); // true 大寫字母和數字
console.log( regex.test("abcdEF234") ); // true 三者都有
複製代碼
上面的正則看起來比較複雜，只要理解了第二步，其他就所有理解了。
/(?=.*[0-9])^[0-9A-Za-z]{6,12}$/
對於這個正則，咱們只須要弄明白 (?=.*[0-9])^ 便可。
分開來看就是 (?=.*[0-9]) 和 ^。
表示開頭前面還有個位置(固然也是開頭，即同一個位置，想一想以前的空字符類比)。
(?=.*[0-9]) 表示該位置後面的字符匹配 .*[0-9]，即，有任何多個任意字符，後面再跟個數字
翻譯成大白話，就是接下來的字符，必須包含個數字。
複製代碼
另一種解法
至少包含兩種字符」的意思就是說，不能所有都是數字，也不能所有都是小寫字母，也不能所有都是大寫 字母。
那麼要求「不能所有都是數字」，怎麼作呢? (?!p) 出馬!
對應的正則是:
var regex = /(?!^[0-9]{6,12}$)^[0-9A-Za-z]{6,12}$/;
最終答案
var regex = /(?!^[0-9]{6,12}$)(?!^[a-z]{6,12}$)(?!^[A-Z]{6,12}$)^[0-9A-Za-z]{6,12}$/; console.log( regex.test("1234567") ); // false 全是數字
console.log( regex.test("abcdef") ); // false 全是小寫字母
console.log( regex.test("ABCDEFGH") ); // false 全是大寫字母
console.log( regex.test("ab23C") ); // false 不足6位
console.log( regex.test("ABCDEF234") ); // true 大寫字母和數字
console.log( regex.test("abcdEF234") ); // true 三者都有
複製代碼
正則表達式括號的做用
3.1. 分組和分支結構
3.1.1. 分組
咱們知道 /a+/ 匹配連續出現的 "a"，而要匹配連續出現的 "ab" 時，須要使用 /(ab)+/。
其中括號是提供分組功能，使量詞 + 做用於 "ab" 這個總體，測試以下:
var regex = /(ab)+/g;
var string = "ababa abbb ababab";
console.log( string.match(regex) );
// => ["abab", "ab", "ababab"]
複製代碼
3.1.2. 分支結構
而在多選分支結構 (p1|p2) 中，此處括號的做用也是不言而喻的，提供了分支表達式的全部可能。
好比，要匹配以下的字符串:
I love JavaScript
I love Regular Expression
var regex = /^I love (JavaScript|Regular Expression)$/;
console.log( regex.test("I love JavaScript") );
console.log( regex.test("I love Regular Expression") );
// => true
// => true
若是去掉正則中的括號，即:
/^I love JavaScript|Regular Expression$/，
匹配字符串是 "I love JavaScript" 和 "Regular Expression"，固然這不是咱們想要的。
複製代碼
3.2. 分組引用
這是括號一個重要的做用，有了它，咱們就能夠進行數據提取，以及更強大的替換操做。
而要使用它帶來的好處，必須配合使用實現環境的 API。
以日期爲例。假設格式是 yyyy-mm-dd 的，咱們能夠先寫一個簡單的正則:
var regex = /\d{4}-\d{2}-\d{2}/;
複製代碼
而後再修改爲括號版的:
var regex = /(\d{4})-(\d{2})-(\d{2})/;
複製代碼
對比這兩個可視化圖片，咱們發現，與前者相比，後者多了分組編號，如 Group #1。
其實正則引擎也是這麼作的，在匹配過程當中，給每個分組都開闢一個空間，用來存儲每個分組匹配到的 數據。
既然分組能夠捕獲數據，那麼咱們就可使用它們。
3.2.1. 提取數據
好比提取出年、月、日，能夠這麼作:
var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";
console.log( string.match(regex) );
// => ["2017-06-12", "2017", "06", "12", index: 0, input: "2017-06-12"]
複製代碼
match 返回的一個數組，第一個元素是總體匹配結果，而後是各個分組(括號裏)匹配的 內容，而後是匹配下標，最後是輸入的文本。另外，正則表達式是否有修飾符 g，match 返回的數組格式是不同的。
另外也可使用正則實例對象的 exec 方法:
var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";
console.log( regex.exec(string) );
// => ["2017-06-12", "2017", "06", "12", index: 0, input: "2017-06-12"]
複製代碼
同時，也可使用構造函數的全局屬性 $1 至 $9 來獲取:
var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";
regex.test(string); // 正則操做便可，例如
//regex.exec(string);
//string.match(regex);
console.log(RegExp.$1); // "2017"
console.log(RegExp.$2); // "06"
console.log(RegExp.$3); // "12"
沒有創建構造函數RegExp就取最後一個生成
複製代碼
3.2.2. 替換
好比，想把 yyyy-mm-dd 格式，替換成 mm/dd/yyyy 怎麼作?
var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";
var result = string.replace(regex, "$2/$3/$1");
console.log(result);
// => "06/12/2017"
其中 replace 中的，第二個參數裏用 $1、$2、$3 指代相應的分組。等價於以下的形式:、
var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";
var result = string.replace(regex, function () {
return RegExp.$2 + "/" + RegExp.$3 + "/" + RegExp.$1;
});
console.log(result);
// => "06/12/2017"
也等價於
var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";
var result = string.replace(regex, function (match, year, month, day) {
return month + "/" + day + "/" + year;
});
console.log(result);
// => "06/12/2017"
複製代碼
3.3. 反向引用
除了使用相應 API 來引用分組，也能夠在正則自己裏引用分組。但只能引用以前出現的分組，即反向引用。 仍是以日期爲例。
好比要寫一個正則支持匹配以下三種格式:
2016-06-12
2016/06/12
2016.06.12
最早可能想到的正則是：
var regex = /\d{4}(-|\/|\.)\d{2}(-|\/|\.)\d{2}/;
var string1 = "2017-06-12";
var string2 = "2017/06/12";
var string3 = "2017.06.12";
var string4 = "2016-06/12";
console.log( regex.test(string1) ); // true
console.log( regex.test(string2) ); // true
console.log( regex.test(string3) ); // true
console.log( regex.test(string4) ); // true
其中 / 和 . 須要轉義。雖然匹配了要求的狀況，但也匹配 "2016-06/12" 這樣的數據。
複製代碼
假設咱們想要求分割符先後一致怎麼辦?此時須要使用反向引用:
var regex = /\d{4}(-|\/|\.)\d{2}\1\d{2}/;
var string1 = "2017-06-12";
var string2 = "2017/06/12";
var string3 = "2017.06.12";
var string4 = "2016-06/12";
console.log( regex.test(string1) ); // true
console.log( regex.test(string2) ); // true
console.log( regex.test(string3) ); // true
console.log( regex.test(string4) ); // false
複製代碼
注意裏面的 \1，表示的引用以前的那個分組 (-|/|.)。無論它匹配到什麼(好比 -)，\1 都匹配那個同 樣的具體某個字符。
咱們知道了 \1 的含義後，那麼 \2 和 \3 的概念也就理解了，即分別指代第二個和第三個分組。
3.3.1. 括號嵌套怎麼辦?
以左括號(開括號)爲準。好比:
var regex = /^((\d)(\d(\d)))\1\2\3\4$/;
var string = "1231231233";
console.log( regex.test(string) ); // true
console.log( RegExp.$1 ); // 123
console.log( RegExp.$2 ); // 1
console.log( RegExp.$3 ); // 23
console.log( RegExp.$4 ); // 3
複製代碼
咱們能夠看看這個正則匹配模式:
第一個字符是數字，好比說 "1"
第二個字符是數字，好比說 "2"
第三個字符是數字，好比說 "3"
接下來的是 \1，是第一個分組內容，那麼看第一個開括號對應的分組是什麼，是 "123"
接下來的是 \2，找到第2個開括號，對應的分組，匹配的內容是 "1"
接下來的是 \3，找到第3個開括號，對應的分組，匹配的內容是 "23"
最後的是 \4，找到第3個開括號，對應的分組，匹配的內容是 "3"
3.3.2. \10 表示什麼呢?
另一個疑問多是，即 \10 是表示第 10 個分組，仍是 \1 和 0 呢?
答案是前者，雖然一個正則裏出現 \10 比較罕見。測試以下:
var regex = /(1)(2)(3)(4)(5)(6)(7)(8)(9)(#) \10+/;
var string = "123456789# ######"
console.log( regex.test(string) );
// => true
複製代碼
若是真要匹配 \1 和 0 的話，請使用 (?:\1)0 或者 \1(?:0)。
3.3.3. 引用不存在的分組會怎樣?
由於反向引用，是引用前面的分組，但咱們在正則裏引用了不存在的分組時，此時正則不會報錯，只是匹配 反向引用的字符自己。例如 \2，就匹配 "\2"。注意 "\2" 表示對 "2" 進行了轉義。
var regex = /\1\2\3\4\5\6\7\8\9/;
console.log( regex.test("\1\2\3\4\5\6\7\8\9") );
console.log( "\1\2\3\4\5\6\7\8\9".split("") );
複製代碼
3.3.4. 分組後面有量詞會怎樣?
分組後面有量詞的話，分組最終捕獲到的數據是最後一次的匹配。好比以下的測試案例:
var regex = /(\d)+/;
var string = "12345";
console.log( string.match(regex) );
// => ["12345", "5", index: 0, input: "12345"]
複製代碼
從上面看出，分組 (\d) 捕獲的數據是 "5"。
同理對於反向引用，也是這樣的。測試以下:
var regex = /(\d)+ \1/;
console.log( regex.test("12345 1") );
// => false
console.log( regex.test("12345 5") );
// => true
複製代碼
3.3.5. 非捕獲括號?
以前文中出現的括號，都會捕獲它們匹配到的數據，以便後續引用，所以也稱它們是捕獲型分組和捕獲型分 支。
若是隻想要括號最原始的功能，但不會引用它，即，既不在 API 裏引用，也不在正則裏反向引用。 此時可使用非捕獲括號 (?:p) 和 (?:p1|p2|p3)，例如本章第一個例子能夠修改成:
var regex = /(?:ab)+/g;
var string = "ababa abbb ababab";
console.log( string.match(regex) );
// => ["abab", "ab", "ababab"]
同理，第二例子能夠修改成:
var regex = /^I love (?:JavaScript|Regular Expression)$/;
console.log( regex.test("I love JavaScript") );
console.log( regex.test("I love Regular Expression") );
// => true
// => true
複製代碼
3.5. 相關案例
3.5.1. 字符串 trim 方法模擬
trim 方法是去掉字符串的開頭和結尾的空白符。有兩種思路去作。
第一種，匹配到開頭和結尾的空白符，而後替換成空字符。如:
function trim(str) {
return str.replace(/^\s+|\s+$/g, '');
}
console.log( trim(" foobar ") );
// => "foobar"
複製代碼
第二種，匹配整個字符串，而後用引用來提取出相應的數據:
function trim (str) {
return str.replace(/^\s*(.*?)\s*$/g, "$1");
}
console.log( trim(" foobar ") );
// => "foobar"
複製代碼
這裏使用了惰性匹配 *?，否則也會匹配最後一個空格以前的全部空格的。 固然，前者效率高。
3.5.2. 將每一個單詞的首字母轉換爲大寫
function titleize (str) {
return str.toLowerCase().replace(/(?:^|\s)\w/g, function (c) {
return c.toUpperCase();
});
}
console.log( titleize('my name is epeli') );
// => "My Name Is Epeli"
複製代碼
思路是找到每一個單詞的首字母，固然這裏不使用非捕獲匹配也是能夠的。
3.5.3. 駝峯化
function camelize (str) {
return str.replace(/[-_\s]+(.)?/g, function (match, c) {
return c ? c.toUpperCase() : '';
});
}
console.log( camelize('-moz-transform') );
// => "MozTransform"
複製代碼
其中分組 (.) 表示首字母。單詞的界定是，前面的字符能夠是多個連字符、下劃線以及空白符。正則後面 的 ? 的目的，是爲了應對 str 尾部的字符可能不是單詞字符，好比 str 是 '-moz-transform '。
3.5.4. 中劃線化
function dasherize (str) {
return str.replace(/([A-Z])/g, '-$1').replace(/[-_\s]+/g, '-').toLowerCase();
}
console.log( dasherize('MozTransform') );
// => "-moz-transform"
複製代碼
3.5.5. HTML 轉義和反轉義
// 將HTML特殊字符轉換成等值的實體 function escapeHTML (str) {
var escapeChars = {
'<' : 'lt',
'>' : 'gt',
'"' : 'quot',
'&' : 'amp',
'\'' : '#39'
};
return str.replace(new RegExp('[' + Object.keys(escapeChars).join('') +']', 'g'),
function (match) {
return '&' + escapeChars[match] + ';';
});
}
console.log( escapeHTML('<div>Blah blah blah</div>') );
// => "<div>Blah blah blah</div>";
複製代碼
// 實體字符轉換爲等值的HTML。
function unescapeHTML (str) {
var htmlEntities = {
nbsp: ' ',
lt: '<',
gt: '>',
quot: '"',
amp: '&',
apos: '\'' }; return str.replace(/\&([^;]+);/g, function (match, key) { if (key in htmlEntities) { return htmlEntities[key]; } return match; }); } console.log( unescapeHTML('<div>Blah blah blah</div>') ); // => "<div>Blah blah blah</div>" 複製代碼
3.5.6. 匹配成對標籤
要求匹配:
<title>regular expression</title>
<p>laoyao bye bye</p>
不匹配:
<title>wrong!</p>
複製代碼
匹配一個開標籤，可使用正則 <[^>]+>， 匹配一個閉標籤，可使用 </[^>]+>， 可是要求匹配成對標籤，那就須要使用反向引用，如
var regex = /<([^>]+)>[\d\D]*<\/\1>/;
var string1 = "<title>regular expression</title>";
var string2 = "<p>laoyao bye bye</p>";
var string3 = "<title>wrong!</p>";
console.log( regex.test(string1) ); // true
console.log( regex.test(string2) ); // true
console.log( regex.test(string3) ); // false
複製代碼
其中開標籤 <[^>]+> 改爲 <([^>]+)>，使用括號的目的是爲了後面使用反向引用， 而提供分組。閉標籤使用了反向引用，</\1>。
另外，[\d\D]的意思是，這個字符是數字或者不是數字，所以，也就是匹配任意字符的意思。
下一篇連接 js的正則詳細教程（二）
- 1. python教程：Python中正則表達式的詳細教程
- 2. 最詳細的JavaScript高級教程（十一）正則表達式
- 3. js正則表達式詳細解析
- 4. Perl正則表達式超詳細教程
- 5. js的正則
- 6. iOS：詳細的正則表達式
- 7. Visio Professional詳細教程(一)
- 8. JS正則表達式大全(整理詳細且實用)
- 9. JS正則表達式語法大全（非常詳細）
- 10. JS正則表達式語法大全（很是詳細）
- 更多相關文章...
- • Scala 正則表達式 - Scala教程
- • PHP 正則表達式(PCRE) - PHP參考手冊
- • Java 8 Stream 教程
- • YAML 入門教程
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 安裝cuda+cuDNN
- 2. GitHub的使用說明
- 3. phpDocumentor使用教程【安裝PHPDocumentor】
- 4. yarn run build報錯Component is not found in path 「npm/taro-ui/dist/weapp/components/rate/index「
- 5. 精講Haproxy搭建Web集羣
- 6. 安全測試基礎之MySQL
- 7. C/C++編程筆記：C語言中的複雜聲明分析，用實例帶你完全讀懂
- 8. Python3教程(1)----搭建Python環境
- 9. 李宏毅機器學習課程筆記2：Classification、Logistic Regression、Brief Introduction of Deep Learning
- 10. 阿里雲ECS配置速記