《前端之路》之 前端 正则表达式 魔法 （中）--- 捕获组、反向引用

第二章 - 02： 前端 正则表达式 魔法 （中）--- 捕获组、反向引用

一、预定义字符类

1-1 ： “ . ” 的意思

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 ” 的意思

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 ” 的意思

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

1-4 ： “ \w ” 的意思

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 ” 的意思

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 ” 的意思

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 ” 的意思

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 ” 的意思

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 ” 的意思

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

二、分组

(ab)+

捕获(capture)

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

三、或操作符

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

四、反向引用

将捕获作为正则表达式中能够成功匹配术语时的候选字符串

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)

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

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

4-2 反向引用

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

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

反向引用