正則表達式

正則表達式是匹配模式，要麼匹配字符，要麼匹配位置

一，橫向模糊匹配

1，何爲橫向模糊匹配

正可匹配的字符串的長度不是固定的，能夠是多種狀況的
複製代碼

2，實現方式

{m, n} 表示連續出現最少 m 次，最多 n 次
複製代碼

3，例子

var regex = /ab{2,5}c/g;
var string = "abc abbc abbbc abbbbc abbbbbc abbbbbbc";
console.log( string.match(regex) );
// => ["abbc", "abbbc", "abbbbc", "abbbbbc"]
複製代碼

其可視化以下：

二，縱向模糊匹配

1，何爲縱向向模糊匹配

一個正則匹配的字符串，具體到某一位字符時，它能夠不是某個肯定的字符，能夠有多種可能
複製代碼

2，實現方式，例如

/a[123]b/ 能夠匹配以下三種字符串: "a1b"、"a2b"、"a3b"
複製代碼

3，例子

var regex = /a[123]b/g;
var string = "a0b a1b a2b a3b a4b";
console.log( string.match(regex) );
// => ["a1b", "a2b", "a3b"]
複製代碼

其可視化以下：

三，字符組

1，範圍表示法

[123456abcdefGHIJKLM] 能夠寫成 [1-6a-fG-M]，用連字符 - 來省略和縮寫。
複製代碼

2，排除字符組

縱向模糊匹配，還有一種情形就是，某位字符能夠是任何東西，但就不能是 "a"、"b"、"c"。此時就是排除字符組(反義字符組)的概念。例如 [^abc]，表示是一個除 "a"、"b"、"c"以外的任意一個字 符。字符組的第一位放 ^(脫字符)，表示求反的概念。

[^abc]
複製代碼

3，常見簡寫形式

字符	描述
\d	表示 [0-9]。表示是一位數字
\D	表示 [^0-9]。表示除數字外的任意字符
\w	表示 [0-9a-zA-Z_]。表示數字、大小寫字母和下劃線
\W	表示 [^0-9a-zA-Z_]。非單詞字符
\s	表示[\t\v\n\r\f]。表示空白符，包括空格、水平製表符、垂直製表符、換行符、回車符、換頁 符
\S	表示 [^ \t\v\n\r\f]。 非空白符。
.	表示[^\n\r\u2028\u2029]。通配符，表示幾乎任意字符。換行符、回車符、行分隔符和段分隔符 除外。

4，量詞

量詞	具體含義
{m,}	至少出現 m 次
{m}	出現 m 次
?	等價於 {0, 1}，表示出現或者不出現
+	等價於 {1,}，表示至少出現一次
*	等價於 {0,}，表示出現任意次，有可能不出現

5，多選分支

一個模式能夠實現橫向和縱向模糊匹配。而多選分支能夠支持多個子模式任選其一。 具體形式以下:(p1|p2|p3)，其中 p一、p2 和 p3 是子模式，用 |(管道符)分隔，表示其中任何之一。

舉例以下：

var regex = /good|nice/g;
var string = "good idea, nice try.";
console.log( string.match(regex) );
// => ["good", "nice"]
複製代碼

案例分析

1，匹配 16 進制顏色值 要求匹配：

#ffbbad
#Fc01DF
#FFF
#ffE
複製代碼

分析：

• 表示一個 16 進制字符，能夠用字符組 [0-9a-fA-F]。
• 其中字符能夠出現 3 或 6 次，須要是用量詞和分支結構。
• 使用分支結構時，須要注意順序。

正則以下：

let regex = /#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})/g;
let str = "#ffbbad #Fc01DF #FFF #ffE";
console.log( str.match(regex) );
 // => ["#ffbbad", "#Fc01DF", "#FFF", "#ffE"]
複製代碼

2，匹配時間

要求匹配（24小時制）：

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
複製代碼

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
複製代碼

四，位置匹配

ES5中，共有6個錨：

^、$、\b、\B、(?=p)、(?!p)
複製代碼

1，^ 和 $

• ^(脫字符)匹配開頭，在多行匹配中匹配行開頭。
• $(美圓符號)匹配結尾，在多行匹配中匹配行結尾。

例：

var result = "hello".replace(/^|$/g, '#');
console.log(result);
// => "#hello#"
複製代碼

2，\b 和 \B

\b 是單詞邊界，具體就是 \w 與 \W 之間的位置，也包括 \w 與 ^ 之間的位置，和 \w 與 $ 之間的位置。

例：

var result = "[JS] Lesson_01.mp4".replace(/\b/g, '#');
console.log(result);
// => "[#JS#] #Lesson_01#.#mp4#"
複製代碼

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"
複製代碼

3，(?=p) 和 (?!p)

(?=p)，其中 p 是一個子模式，即 p 前面的位置，或者說，該位置後面的字符要匹配 p。

例：

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#"
複製代碼

案例分析

1，數字的千位分隔符表示法，例如把 "12345678"，變成 "12,345,678"。

第一步：弄出最後一個逗號

var result = "12345678".replace(/(?=\d{3}$)/g, ',')
console.log(result);
// => "12345,678"
複製代碼

第二步：弄出全部的逗號

var result = "12345678".replace(/(?=(\d{3})+$)/g, ',')
console.log(result);
// => "12,345,678"
複製代碼

第三步：去除開頭的逗號

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，貨幣格式化

function format (num) {
  return num.toFixed(2).replace(/\B(?=(\d{3})+\b)/g, ",").replace(/^/, "$$ ");
};
console.log( format(1888) );
// => "$ 1,888.00"
複製代碼

3，驗證密碼問題

密碼長度 6-12 位，由數字、小寫字符和大寫字母組成，但必須至少包括 2 種字符。

第一步：忽略至少包括兩種字符

var regex = /^[0-9A-Za-z]{6,12}$/;
複製代碼

第二步：判斷是否包含有某一種字符

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 三者都有
複製代碼

注： 本文內容大部分出自老姚的 JS正則表達式完整教程，這裏抽出一部分基礎的章節做爲公司內部分享，作了一下搬運工。本篇幅抽取的部分有限，有興趣的同窗能夠直接看原版教程。