《前端之路》之 前端 正則表達式 魔法 （下）--- 捕獲組、反向引用

目錄

• 第二章 - 02： 前端 正則表達式 魔法 （中）--- 捕獲組、反向引用
  • 1、預約義字符類
  • 2、分組
  • 3、或操做符
  • 4、反向引用
    • 4-1 捕獲組
    • 4-2 反向引用

第二章 - 02： 前端 正則表達式 魔法 （中）--- 捕獲組、反向引用

來源於：《JavaScript 忍者祕籍》

前端之路 系列 繼續 來聊一聊 正則表達式！

1、預約義字符類

表示匹配一類的字符集，由正則表達式的語法提供。以下：

預預約術語	匹配內容
.	匹配處理新行\n以外的任意字符
\s	空白字符
\S	非空白字符
\w	能夠構成單詞的字符
\W	不能構成單詞的字符
\d	數字
\D	非數字
\b	單詞的邊界
\B	不是單詞的邊界
\t	水平製表符
\v	垂直製表符
\f	換頁符
\r	回車符
\n	換行符
\cA : \cZ	控制符，例如\cM 匹配一個ctrl+m
\x0000 : \xFFFF	十六進制的Unicode碼
\x00 : \xFF	十六進制ASCII碼

下面，咱們按照上面的表格來分別寫一個小 Demo

1-1 ： 「 . 」 的意思

除了空格和換行符之外的全部字符 eg:

var reg = /./g
var str = 'x'
var str2 = 123
var str3 = ' '
var str4 = '\n'
var str5 = '\r'
var res = reg.test(str) // true
var res2 = reg.test(str2) // true
var res3 = reg.test(str3) // false
var res4 = reg.test(str4) // false
var res5 = reg.test(str5) // false

1-2 ： 「 \s 」 的意思

匹配空白字符 （space） eg：

var reg = /\s/g
var str = 'x'
var str2 = ' '
var str3 = '\n'
var str4 = '\r'
var str5 = '\r\n'
var res = reg.test(str)    // false
var res2 = reg.test(str2)  // true
var res3 = reg.test(str3)  // false
var res4 = reg.test(str4)  // true
var res5 = reg.test(str5)  // true

// 又疑惑了 🤔？？？
// 沒法解釋？ n 表明 newLine 新行， r 表明 return 換行
// 只能這麼解釋了，newline 是由於這一行寫滿了沒有空白了， return 是強行換行，因此必定是有空白的。

1-3 ： 「 \S 」 的意思

匹配非空白字符 （Space） eg：

var reg = /\S/g
var str = 'x'
var str2 = ' '
var res = reg.test(str)    // true
var res2 = reg.test(str2)  // false

1-4 ： 「 \w 」 的意思

匹配能夠構成單詞的字符 （world）( 匹配字母、數字、下劃線 ) eg：

var reg = /\w/g
var str = 'age'
var str2 = 'a1ge'
var str3 = 'a ge'
var str4 = 'a&ge'
var str5 = 123
var res = reg.test(str)    // true
var res2 = reg.test(str2)  // true
var res3 = reg.test(str3)  // true
var res4 = reg.test(str4)  // true
var res5 = reg.test(str5)  // false
var arr = [res,res2,res3,res4,res5]
for(let i = 0; i<arr.length; i++) {
    console.log(arr[i])
}

1-5 ： 「 \W 」 的意思

匹配不能夠構成單詞的字符 （World） eg：

var reg = /\W/g
var str = 'age'
var str2 = 'a1ge'
var str3 = 'a ge'
var str4 = 'a&ge'
var str5 = 123
var res = reg.test(str)    // false
var res2 = reg.test(str2)  // false
var res3 = reg.test(str3)  // true
var res4 = reg.test(str4)  // false
var res5 = reg.test(str5)  // false

var arr = [res,res2,res3,res4,res5]
for(let i = 0; i<arr.length; i++) {
    console.log(arr[i])
}

// 有疑惑 🤔 爲啥呢？
// str3 中出現了空格 確實不能組成單詞

1-6 ： 「 \d 」 的意思

匹配 數字（ digit ） eg：

var reg = /\d/g
var str = 123
var str2 = 'xxx'
var res = reg.test(str)     // true
var res2 = reg.test(str2)   // false

1-7 ： 「 \D 」 的意思

匹配 非數字（ Digit ） eg：

var reg = /\D/g
var str = 123
var str2 = 'xxx'
var res = reg.test(str)     // false
var res2 = reg.test(str2)   // true

1-7 ： 「 \b 」 的意思

匹配 單詞的邊界（ boundary ）( 字母、數字、下劃線 ) eg：

var reg = /\b/g
var str = 123
var str2 = '@'
var str3 = '_'
var str4 = '&'
var str5 = 'xxx'
var res = reg.test(str)     // true
var res2 = reg.test(str2)   // false
var res3 = reg.test(str3)   // true
var res4 = reg.test(str4)   // false
var res5 = reg.test(str5)   // true

1-8 ： 「 \B 」 的意思

匹配 非單詞的邊界（ Boundary ） eg：

var reg = /\B/g
var str = 123
var str2 = '@'
var str3 = '_'
var str4 = '&'
var str5 = 'xxx'
var res = reg.test(str)     // true
var res2 = reg.test(str2)   // true
var res3 = reg.test(str3)   // false
var res4 = reg.test(str4)   // true
var res5 = reg.test(str5)   // true

2、分組

若是想將操做符應用於一組字符串，可使用()，這就是分組的概念。

例如(ab)+匹配的就是一個或多個字符串ab
當用括號進行分組時，也建立了所謂的捕獲(capture)

咱們仍是來舉例子來講明：
eg:

// demo-1
var reg = /(ab)+/g
var str = 'bababababbababababaaabbb'
var res = str.match(reg)    // ["abababab", "abababab", "ab"]

// demo-2
var reg = /(ab)/g
var str = 'bababababbababababaaabbb'
var res = str.match(reg)    
// ["ab", "ab", "ab", "ab", "ab", "ab", "ab", "ab", "ab"]

貪婪匹配了 連續符合 ab * n 規則的字符串

3、或操做符

用|表示或者的關係，例如a|b表示匹配a或b字符
eg:

// demo
var reg = /a|b/g
var str = 'abcd'
var str2 = 'aabbccdd'
var res = str.match(reg) // ["a", "b"]
var res2 = str2.match(reg) // ["a", "a", "b", "b"]

4、反向引用

正則表達式中所定義的捕獲的反向引用指的是 將捕獲做爲正則表達式中可以成功匹配術語時的候選字符串 這種術語表示法是在反斜杆後面加一個要引用的捕獲數量。
eg:

var str = '<p>1</p>'
var str2 = '<strong>2</strong>'
var reg = /<(\w+)>(.+)<\/\1>/

var res = str.match(reg)
var res2 = str2.match(reg)

仍是有疑惑？ 🤔 爲何呢？
每每一個定義沒法被理解的話，就只能 換中理解方式來理解這些理解不了的。
另一種 特殊解釋：
捕獲組捕獲到的內容，不只能夠在正則表達式外部經過程序進行引用，也能夠在正則表達式內部進行引用，這種引用方式就是反向引用。
又有一個問題： 捕獲組 是什麼意思？

4-1 捕獲組

什麼是捕獲組？

捕獲組就是把正則表達式中子表達式匹配的內容，保存到內存中以數字編號或顯式命名的組裏，方便後面引用。固然，這種引用既能夠是在正則表達式內部，也能夠是在正則表達式外部。

捕獲組有兩種形式，一種是普通捕獲組，另外一種是命名捕獲組，一般所說的捕獲組指的是普通捕獲組。語法以下：

普通捕獲組：(Expression)

命名捕獲組：(?<name>Expression)

Demo -1 普通捕獲組 :

var str = "2018-08-30"
var generalReg = /(\d{4})-(\d{2})-(\d\d)/g
var res = str.match(generalReg)     // ["2018-08-30"]

上面的 例子當中 表達式中就很明確的 捕獲組、編號等

編號	命名	捕獲組	匹配內容
0		(\d{4})-(\d{2})-(\d\d))	2018-08-30
1		(\d{4})	2018
2		(\d{2})	08
3		(\d\d)	30

Demo -2 命名捕獲組 :

var str = "2018-08-30"
var generalReg = /(?<year>\d{4})-(?<date>\d{2})-(?<day>\d\d)/g
var res = str.match(generalReg)     // ["2018-08-30"]

上面的 例子當中 表達式中就很明確的 捕獲組、編號等

編號	命名	捕獲組	匹配內容
0		(\d{4})-(\d{2})-(\d\d))	2018-08-30
1	year	(\d{4})	2018
2	date	(\d{2})	08
3	day	(\d\d)	30

4-2 反向引用

正則表達式中，對前面捕獲組捕獲的內容進行引用，稱爲反向引用；
咱們結合上面講到的內容再進行一個 Demo ：

var str = 'abcdebbcde'
var reg = /([ab])/g
var res = reg.test(str)     // true
var res0 = str.match(reg)   // ['bb']

var reg2 = /([ab])\2/g
var res2 = reg2.test(str)       // false
var res3 = str.match(reg2)      // null

var strs = 'abcdbaabbccde'
var reg3 = /([ab])([a])\2/g
var res3 = reg3.test(strs)
var res4 = strs.match(reg3)  // ["baa"]

再來一次Demo

var str = '<div><p>1</p><strong>2</strong><div>'
var reg = /<(\w+)>(.+)<(\/\1)>?/g
var res = str.match(reg)        // ["<p>1</p>", "<strong>2</strong>"]

這裏對於反向引用是否是又多了一份理解咧～

反向引用 在實際的使用場景仍是比較多，並且也是一個比較重要的概念，但願能深度感覺。

今日份關於正則表達式的介紹就先到這裏了，深圳最近幾天都是暴雨，下班回家咯～記得要帶傘噢

GitHub 地址：（歡迎 star 、歡迎推薦 : )

前端 正則表達式 魔法 （中）