JavaScript 正則表達式--筆記

1 正則表達式字符匹配

1.創建

正則是 js 內置對象，兩種方法創建。

let re01 = new RegExp('a'); // 這種形式可以往正則中傳入變量
let re02 = /a/; // 簡寫不可以傳入變量，不可以加引號

2.test 方法

以字符串爲參數，字符串有符合正則的部分，返回 true，否則返回 false。

let str = 'abc';
let re = /a/;
re.test(str); // true

3.search 方法

以正則爲參數，查找字符串中有符合正則的部分，有則返回第一個匹配項的位置，否則返回 -1。

let str = 'bbcasa';
let re = /a/;
str.search(re); // 4

4.match 方法

以正則爲參數，尋找字符串中符合正則的匹配項，並將這些匹配項以數組形式返回，否則返回 null。

let str = 'abcaadaefaa';
let re = /a+/g; // + 表示出現一次或者更多，g 表示全局搜索
str.match(re); // ['a','aa','a','aa']

5.replace 方法

str.replace(re, newStr | callback) 該方法首先匹配字符串中符合正則的部分然後替換成newStr或者callback的返回值；這裏的callback = function(str,str1,str2…){return res}，參數str表示匹配到的匹配項，str1，str2…分別表示正則匹配項中的第一個，第二個子項。

var str = "我愛喫飯，我愛睡覺，我愛打豆豆";
var re = /(喫飯)|(睡覺)|(打豆豆)/g ;
str.replace(re, (...grv) => {
    var res = [];
    res = grv[0].split("").map(() => {return "*"}).join("")
    return res
})

6.默認行爲

• 正則默認區分大小寫，在末尾加 i 關閉區分大小寫

var re=/AbvR/i;

• 正則默認找到第一個匹配項就會結束，在末尾加 b可以使正則變爲全局模式

var re=/as/b;

正則表達式可以橫向模糊匹配，縱向模糊匹配

7.橫向模糊匹配

使用量詞，比如{m,n}，/ab{2,5}c/ 表示匹配第一個字符是“a”，後面的2到5個是“b”，然後是“c”。

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

這裏用到了 g，代表要找到所有滿足條件的子串。

8.縱向模糊匹配

使用字符組，比如[abc]，代表可以是 “a”，“b”，“c” 中的任意一個。/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"]

9量詞

9.1簡寫

{m,} 表示至少出現 m 次

{m} 等價於{m,m} 表示只出現 m 次

? 等價於 {0,1} 表示出現 0 次到 1 次，也就是可能出現可能不出現

+ 等價於 {1,} 表示至少出現 1 次

* 等價於 {0,} 表示出現 0 到 無數次，也就是可能不出現，可能出現任意次

9.2貪婪匹配和惰性匹配

• 貪婪匹配

var regex = /\d{2,5}/g;
var string = "123 1234 12345 123456";
console.log( string.match(regex) ); 
// => ["123", "1234", "12345", "12345"]

看這個正則代表任意數字出現 2 到 5 次，是貪婪的，會盡可能的匹配，如果給他 6 個，他會匹配其中的 5 個，在能力範圍內越多越好。

• 惰性匹配

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"]

“?” 表示雖然 2 次到 5 次都可以，但是 2 次就夠了，不貪婪。量詞後面加個 “?” 就是表示惰性匹配，記憶方法就是問問自己，足夠了嗎？

10 量詞

10.1 範圍表示法

如果字符組裏的字符特別多，可以用範圍表示，[1234abcdefGHIJKLM]，可以寫成[1-4a-fG-M]，在這裏 “-” 當做了一種表示範圍的特殊用法，但如果想要匹配的就是 “-“，可以寫成[-az]，[az-]，[a\-z]。

要麼錯開要麼轉譯。

10.2 排除字符組

縱向匹配除了表示字符組中的任何一個，但也可以是除了字符組之外的任意一個，就是排除字符組。

[^abc] 表示除了“a”，“b”，“c”之外的任意字符。

10.3 常見的字符組簡寫

\d 是 [0-9] 記憶方法是數字的英文 digit

\D 是 [^0-9]

\w 是 [0-9a-zA-Z_] 表示數字、大小寫字母和下劃線

\W 是 [^0-9a-zA-Z_] 表示非單詞字符

\s 是 [ \t\v\n\r\f] 表示空白符，包括空格、水平製表符、垂直製表符、換行符、回車符、換頁符。記憶方法是 space character 的首字母

\S 是 [^ \t\v\n\r\f] 表示非空白符

. 是 [^\n\r\u2028\u2029] 表示通配符，幾乎是任意字符（換行符、回車符、行分隔符和段分隔符除外）

如果需要匹配任意字符，使用 [\d\D]，[\w\W]，[\s\S]，[^] 中任何的一個

11 多選分支

多選分支可以支持多個子模式任選其一。

具體形式：(p1|p2|p3)，其中 p1，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/ 去匹配“goodbye”，結果是“goodbye”：

var regex = /goodbye|good/g;
var string = "goodbye";
console.log( string.match(regex) ); 
// => ["goodbye"]

因爲分支結構也是惰性的。

2 正則表達式位置匹配

2.1 錨字符

**^**

**$**

**\b**

**\B**

**(?=p)**

**(?!p)**

2.1.1 ^ 和 $

^ 匹配開頭，匹配輸入的開始

$ 匹配結尾，匹配輸入的結束

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

多行匹配時二者是行首和行尾的概念：

var result = "I\nlove\njavascript".replace(/^|$/gm, '#');
console.log(result);
/*
#I#
#love#
#javascript#
*/

2.1.2 \b 和 \B

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

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

前幾個#是 \w 和 \W 之間的位置，最後一個是\w 和 $ 之間的位置。

\B 就是\b 反面的意思。也就是上面結果所有不是#的地方插入#：

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.1.3 (?=p) 和 (?!p)

(?=p)，p 前面的位置，p 是一個子模式。positive lookahead

比如 (?=l)，就是 “l” 字符前面的位置：

var result = "hello".replace(/(?=l)/g, '#');
console.log(result); 
// => "he#l#lo"

而 (?!p) 就是 (?=p) 的反面意思，negative lookahead：

var result = "hello".replace(/(?!l)/g, '#');
console.log(result); 
// => "#h#ell#o#"

ES6 中支持 (?<=p) positive lookbehind 和 (?

2.2 位置的特性

“位置”可以理解空字符“”，“hello”等價爲：

"hello" == "" + "h" + "" + "e" + "" + "l" + "" + "l" + "o" + "";

也等價於：

"hello" == "" + "" + "hello"