正则表达式中原子组的基本使用

什么是原子组

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

一个简单的示例

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' ]
  1. 如果此时将整个正则匹配的内容分别分配到3个原子组中,就方便后续的数据处理了,修正为:/(\d{3,4})(-)(\d{7,8})/g
[ '010', '-', '85990021', 3, '北京:010-85990021, 上海:020-69323342' ]
[ '020', '-', '69323342', 20, '北京:010-85990021, 上海:020-69323342' ]
  1. 现在完全可以根据需要替换原字符串了,比如在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]+/, '-`-&-$\'-')

正则表达式中原子组的基本使用》有1个想法

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

Captcha Code