一、匹配分组
字符
功能
|
匹配左右任意一个表达式
(ab)
将括号中的字符作为一个分组
\num
引用分组num匹配到的字符串
(?)
分组起别名
(\k)
引用别名为name分组匹配到的字符串
1、|
需求:匹配出0-100之间的数字
分析:首先我们明确这之间的数字包含0,两位数,100,也就是一位,两位,三位的可能都有,鉴于一位0,三位100都是单独数字,我们可以使用 | 来连接(相当于or),着重考虑一位数[1-9],两位数[10-99],分析其特征,这里第一位数必须为[1-9],第二位[0-9]都可以(\d可以表示),对于一位数[1-9]的第二位可以不出现(?可以表示),再加个结尾$,防止234匹配到23的情况。因此正则表达式为:
/^[1-9]\d?$|0$|100$/
2、(ab) 将括号中的字符作为一个分组
需求 :在网页开发或者爬虫时,处理对象是HTML,比如某网页HTML中有这样的内容:
我的CSDN
。那么我该如何把content
中的content提取出来呢?分析:提取的内容用 () 括起来就可以了。
是固定标签,这是不变的,变的是content,因此我的正则表达式可表示为:
/
(.*)/
let res = /
(.*)/
'
我的博客
'.match(res)//(2) ["我的博客
", "我的博客", index: 0, input: "我的博客
", groups: undefined]//0: "我的博客
"//1: "我的博客"//groups: undefined//index: 0//input: "我的博客
"//length: 2我们看看两个括号的情况:
let res = /(\d+)
(.*)/
'1234
我的CSDN
'.match(res)//(3) [" 1234我的CSDN
", "1234", "我的CSDN",index: 0, input: "1234
我的CSDN
", groups: undefined]获取元素为3个的数组,就不多展开了,根据数组内容就可以很方便的获取到需要的content的内容。
所以说,() 在网页开发或爬虫里还是挺重要的。
3、\num 引用分组num匹配到的字符串
需求 :还是以网页为例,比如判断某网页HTML格式是否正确,其中有内容:
我的CSDN
。这时,我们不关心里面的内容,我们关心的是格式是否正确,就是说这样的格式:标签必须有结束,标签必须有
结束。分析:这个时候像html和h1才是关键内容,如果我们把这些用()保存起来,并且在后面一定对应这些内容,就能保证标签的配对,而\num就是解决这样的问题的。
首先我们看个错误的样例:
let res = /<.><.>.+/
'
my csdn
'.match(res)//["my csdn
", index: 0, input: "my csdn
", groups: undefined]let res = /<.><.>.+/
'
my csdn
'.match(res)//["my csdn
", index: 0, input: "my csdn
", groups: undefined]我们把/html改成了/ht 明显格式不对,但还是匹配了。我们应该让第一个的内容出现在最后中,因此需要保存起来,用()括起来
正确的方法:我们应该把用()括起来,变成,因此正则表达式为:
/.+/
let res = /.+/
'
my csdn
'.match(res)//nulllet res = /.+/
'
my csdn
'.match(res)//(3) ["my csdn
", "html", "h1",index: 0, input: "
my csdn
", groups: undefined]解释下,这个\2 和 \1。这个就是对应(tag)的分组,可以通过下面的index内容获取。上面正确的标签,那么 \1指的就是html,\2 指的就是h1
4、(?) 分组起别名 和 (\k) 引用别名
需求 :上面我们已经可以通过\num取得对应的内容用以限定前面的内容,但是如果我有100个括号,那我们就只能数括号的索引index,然后把用\index取得么?答案:当然不是。
分析:这时候取别名(?)就派上用场了,它通过对括号里的内容取别名,然后通过(\k)就可以取得对应的内容,你只要记住别名name,这样就不用去数括号,记索引了。是不是很人性化......
这个语法是:在括号里面同时写上取的别名,以 ? 命名;引用时以 \k 取得别名,所以该正则表达式为:
/.+)>.+)>.+)>)>/
let res1 = /.+)>.+)>.+)>)>/
'
my csdn
'.match(res1)//(5) ["my csdn
", "html", "h1", "h1", "html",index: 0, input: "
my csdn
", groups: {…}]0: "
my csdn
"1: "html"
2: "h1"
3: "h1"
4: "html"groups:
key1:"html"key2:"h1"index:0input:"
my csdn
"length:5__proto__: Array(0)关于正则分组别名,详细的可以看之前总结的这篇博客:JavaScript 正则命名分组