《前端之路》之 前端 正则表达式 魔法 (下)--- 捕获组、反向引用

第二章 - 02: 前端 正则表达式 魔法 (中)--- 捕获组、反向引用

来源于:《JavaScript 忍者秘籍》

前端之路 系列 继续 来聊一聊 正则表达式!

一、预定义字符类

表示匹配一类的字符集,由正则表达式的语法提供。如下:

预预定术语 匹配内容
. 匹配处理新行\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

二、分组

如果想将操作符应用于一组字符串,可以使用(),这就是分组的概念。

例如(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 规则的字符串

三、或操作符

用|表示或者的关系,例如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"]

四、反向引用

正则表达式中所定义的捕获的反向引用指的是 将捕获作为正则表达式中能够成功匹配术语时的候选字符串 这种术语表示法是在反斜杆后面加一个要引用的捕获数量。
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 、欢迎推荐 : )

前端 正则表达式 魔法 (中)

posted @ 2018-08-30 20:22 SmallW 阅读(...) 评论(...) 编辑 收藏