目录
第二章 - 02： 前端 正则表达式 魔法 （中）--- 捕获组、反向引用
一、预定义字符类
二、分组
三、或操作符
四、反向引用
4-1 捕获组
4-2 反向引用
第二章 - 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
(.+)<\/\1>/
var res = str.match(reg)
var res2 = str2.match(reg)
还是有疑惑？ 🤔 为什么呢？
往往一个定义无法被理解的话，就只能 换中理解方式来理解这些理解不了的。
另外一种 特殊解释：
捕获组捕获到的内容，不仅可以在正则表达式外部通过程序进行引用，也可以在正则表达式内部进行引用，这种引用方式就是反向引用。
又有一个问题： 捕获组 是什么意思？
4-1 捕获组
什么是捕获组？
捕获组就是把正则表达式中子表达式匹配的内容，保存到内存中以数字编号或显式命名的组里，方便后面引用。当然，这种引用既可以是在正则表达式内部，也可以是在正则表达式外部。
捕获组有两种形式，一种是普通捕获组，另一种是命名捕获组，通常所说的捕获组指的是普通捕获组。语法如下：
普通捕获组：(Expression)
命名捕获组：(?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 = /(?\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 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 = '1
2'
var reg = /<(\w+)>(.+)<(\/\1)>?/g
var res = str.match(reg) // ["
1
", "
2"]
这里对于反向引用是不是又多了一份理解咧～
反向引用 在实际的使用场景还是比较多，而且也是一个比较重要的概念，希望能深度感受。
今日份关于正则表达式的介绍就先到这里了，深圳最近几天都是暴雨，下班回家咯～记得要带伞噢
GitHub 地址：（欢迎 star 、欢迎推荐 : )
前端 正则表达式 魔法 （中）
欢迎推荐，欢迎 star
分类: 前端之路,JavaScripthttps://www.cnblogs.com/erbingbing/p/9562505.html
