js正则匹配获取分组和正向反向的区别

前言

• 正则学习:http://www.zjmainstay.cn/regexp-one
• regex101网站:https://regex101.com/
• 可视化正则:https://jex.im/regulex/

正向和反向

很多人都不清楚,什么是正向,什么是方向啊,为什么后面是正向,前面是方向啊

• 简单点说

  • 后面为什么是正向: 你识字是从左到右对吧,字在右边,右边当然是正向(顺着你阅读方向)
  • 前面为什么是反向: 你识字是从左到右对吧,字在左边,左边当然是反向了(反着你阅读方向)

• 明白了上面这些,看几个案例熟悉下吧(图+文字)

示例转载自@思否-柏拉图的理想国

example(?:pattern)

• 和?=pattern的区别就是?:pattern会将其匹配进内容里面

• 匹配pattern但不获取匹配结果，也就是说这是一个非获取匹配(也就是不会获取这个括号里面的分组)，不进行存储供以后使用。这在使用或字符(|)来组合一个模式的各个部分是很有用。例如factor(?:y|ies)就是一个比factory|factories更简略的表达式

• /factor(?:y|ies)/:匹配字符串factor后面是y为ies的完整字符串,等同于 factory|factories

var ary = 'factorywork'
const reg = /factor(?:y|ies)/
//匹配正则并替换
const str = ary.replace(reg, '');
console.log('str:', str)
// str: work

//如果正则更换为
const reg = /factor(?=:y|ies)/
//之后执行
const str = ary.replace(reg, '');
console.log('str:', str)
//输出 str: ywork
1
2
3
4
5
6
7
8
9
10
11
12
13

example(?=pattern) 正向肯定

• 正向肯定预查，在任何匹配pattern的example开始处匹配查找字符串。这是一个非获取匹配，该匹配不需要获取供以后使用。
• /factory(?=\d)/g:匹配字符串factory后面是数字的内容

var ary = 'factory123work123factory866'
const reg = /factory(?=\d)/g
const str = ary.replace(reg, '')
console.log('str:', str)
// str: 123work123866
1
2
3
4
5

example(?!pattern) 正向否定

• 正向肯定预查，在任何匹配pattern的example开始处匹配查找字符串。这是一个非获取匹配，该匹配不需要获取供以后使用。
• /factory(?!\d)/g:匹配字符串factory后面不是数字的字符串

var ary = 'factorywork123factory866'
const reg = /factory(?!\d)/g
const str = ary.replace(reg, '')
console.log('str:', str)
// str: work123factory866
1
2
3
4
5

(?<=pattern)example 反向肯定

• 反向肯定预查，与正向肯定预查类似，只是方向相反。查找符合表达式pattern的example。

• /(?<=\d)factory/g:匹配字符串factory前面是数字的字符串

var ary = 'factorywork123factory866'
const reg = /(?<=\d)factory/g
const str = ary.replace(reg, '') // 去掉数字后面factory部分
console.log('str:', str)
// str: factorywork123866
1
2
3
4
5

(?

• 反向否定预查，与正向否定预查类似，只是方向相反。
• /(?:匹配字符串factory前面不是数字的字符串

var ary = 'thisfactorywork123factory866'
const reg = /(?/g
const str = ary.replace(reg, '') // 去掉非数字后的factory
console.log('str:', str)
// str: thiswork123factory866
1
2
3
4
5

匹配获取分组

• 有时候啊,就想获取那个分组匹配的结果,就像regx101颜色标记的那样子,后面发现没几个人分析这方面知识
• 举个简单例子

const temp = "factory123work123factory866";

//我就想获取里面的factory
//要怎么获取通过正则?正则都会

const reg = /factory/gi;

1
2
3
4
5
6
7

• 那么要怎么获取结果呢?当然,你可以反向思考通过replace方法,使用第二个参数传入空字符串去替换,你也可以将第二个参数传入函数供正则使用,这样子就可以获取到匹配的分组结果了,当然,你也可以自己做处理汇聚为一个数组

const temp = "factory123work123factory866";
const reg = /factory/gi;

/**
 *
 * @param matchStr 匹配的分组
 * @param groups 从哪里匹配到的
 * @param index 匹配的开始索引
 * @param sourceStr 匹配源
 */
temp.replace(reg,(matchStr,groups,index,sourceStr) => {
    //console.log(matchStr,groups,index,sourceStr);
    //输出 matchStr,groups,index,sourceStr  undefined
    //输出 factory 17 factory123work123factory866 undefined
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

• 当然,你也可以在replace当中返回值用作替换的值

const temp = "factory123work123factory866";
const reg = /factory/gi;

const end = temp.replace(reg,(matchStr,groups,index,sourceStr) => {
    return '杰';
});
console.log(end);//输出 杰123work123杰866
1
2
3
4
5
6
7