什么是原子组

简单一点讲，原子组就是正则表达式中的小括号()及所包括的内容

一个简单的示例

let date = '今天是2020-09/29';
// 日期分隔符有/或-，如是分开写，会匹配出前后不一致的数据，比如2020-09/29
let reg = /\d{4}[\/\-]\d{2}[\/\-]\d{2}/g;
console.log(date.match(reg));
// 修正为前后保持一致，后面的分隔符可使用前面的原子组，直接写序号即可，因为是第1个，所以转义1
// 此时如果是2020-09/29就匹配不成功了
reg = /\d{4}([\/\-])\d{2}\1\d{2}/g;
console.log(date.match(reg));

获取原子组数据

如果有包括电话号码的字符串北京：010-85990021, 上海：020-69323342，现在需要将格式转换成(xxx)xxxxxxx该如何处理呢？

1. 先匹配出电话号码，这个简单正则/\d{3,4}-\d{7,8}/g即可匹配到2个电话号码；
2. 取出区号数据，这个时候就需要将区号单独划分成一个原子组，修改后的正则为：/(\d{3,4})-\d{7,8}/g；

let tel = '北京：010-85990021， 上海：020-69323342';
// 获取电话号码的正则如下：
let reg = /\d{3}-\d{7,8}/g;
/**
 * 匹配结果为：[ '010-85990021', '020-69323342' ]
 */
console.log(tel.match(reg));

// 将区号单独划分一个原子组，方便获取数据
reg = /(\d{3,4})-\d{7,8}/g
tel.replace(reg, function(substr, ...args){
    console.log(args);
})

输出结果为：

[ '010-85990021', '020-69323342' ]
[ '010', 3, '北京：010-85990021， 上海：020-69323342' ]
[ '020', 20, '北京：010-85990021， 上海：020-69323342' ]

3. 如果此时将整个正则匹配的内容分别分配到3个原子组中，就方便后续的数据处理了，修正为：/(\d{3,4})(-)(\d{7,8})/g

[ '010', '-', '85990021', 3, '北京：010-85990021， 上海：020-69323342' ]
[ '020', '-', '69323342', 20, '北京：010-85990021， 上海：020-69323342' ]

4. 现在完全可以根据需要替换原字符串了，比如在replace方法的回调函数中返回(${args[0]})-${args[2]}即可得到北京：(010)-85990021， 上海：(020)-69323342

命名原子组

以电子邮件地址为例：example@domain.com，如果需要对用户名和域名进行区分，简单的正则表达式为：/.+@.+/。

现在以用户名和域名分别划入原子组中，命名格式为?<xxxx>，正则修正为：/(?<username>.+)@(?<domain>.+)/

使用字符串的match方法，输出结果如下所示：

[
  'example@domain.com',
  'example',
  'domain.com',
  index: 0,
  input: 'example@domain.com',
  groups: [Object: null prototype] {
    username: 'example',
    domain: 'domain.com'
  }
]

正则替换中匹配结果变量

• $` 表示匹配项前面的内容
• $& 表示匹配项自身
• $’ 表示匹配项后面的内容

let str = '123abc456';
// 匹配结果abc，abc前面为123，后面为456
// 替换结果为123-123-abc-456-456
str.replace(/[A-z]+/, '-$`-$&-$\'-')