正则表达式中的分组与子项

分组和子项

利用()对正则表达式里面的子项进行分组

声明一个变量

var str1 = '1970-2-1';

当没有括号的时候

var re1 = /\d-+/g;
console.log(str1.match(re1));    //["0-", "2-"]

有括号的时候

var re2 = /(\d-)+/g;
console.log(str1.match(re2));   //["0-2-"]

/\d-+/g匹配到的是数字后面有一个或者多个-的字符，所以结果与/(\d-)+/g的内容不相同

改变一下字符串，这样的差距会看的更加明显

var str2 = '1970---2---1'

var re1 = /\d-+/g;
console.log(str2.match(re1));    //["0---", "2---"]

var re2 = /(\d-)+/g;
console.log(str2.match(re2));    //["0-", "2-"]

分组中的match()方法

如果正则里面存在分组，那么match()方法的返回值会变得不同

当正则中存在分组，且没有修饰符g的时候，会返回一个数组，数组的第一个值为首先匹配到的结果，后面的值为分组的所有子项匹配到的内容，且还有index和input属性

var str = '1970-2-1';

var re1 = /(\d+)-/;
console.log(str.match(re1));    //["1970-", "1970", index: 0, input: "1970-2-1"]

var re2 = /(\d+)(-)/;
console.log(str.match(re2));    //["1970-", "1970", "-", index: 0, input: "1970-2-1"]

console.log(str.match(re2));    //["1970-", "2-"]

分组中的replace()方法

如果正则里面存在分组，那么replace()方法中的第二个参数为函数时，函数的参数也会不同

当正则存在存在分组，且没有修饰符g的时候，函数的参数情况如下：

• 第一个参数为匹配到的字符串
• 倒数第二个参数为匹配到的字符串对应的下标值
• 最后一个参数为原字符串
• 正则中，有多少个分组，中间就有多少个参数，它们分别对应各个分组的匹配到的内容
  例如，有三个分组，那么第2、3、4个参数就为各个分组的匹配到的内容

var str = '1970--2-1';
var re1 = /(\d+)(-)(-)/;
var newStr1 = str.replace(re1,function($0,$1,$2,$3,$4,$5){
    console.log($0);    //1970--
    console.log($1);    //1970
    console.log($2);    //-
    console.log($3);    //-
    console.log($4);    //0
    console.log($5);    //1970-2-1
})

简单的例子-格式化日期

这里有多个日期字符串，它们的格式很乱，我们需要将它们转化为统一的格式“1970年02月01日”

var str1 = '1970--02---01';
var str2 = '1970asdfi02-/*01'
var str3 = '1970)*(_02/*-01'

我们可以发现它们的内容其实是很规律的，都是数字+其他字符+数字+其他字符+数字，那么只需要将其他字符替换为汉字“年”“月”，并在字符串的后面加上“日”就可以完成这个功能了

那么如何一一对应的去替换这些内容呢？考虑到replace()方法中第二个参数为函数时，函数的部分参数对应的是正则分组中的内容就可以轻松的解决了

首先需要一个正则，匹配到整个字符串

var re = /\d+\D+\d+\D+\d+/;

然后通过分组让函数的参数可以一一对应，将年、月、日这三个字和这些参数代表的字符串拼接在一起就可以了

var re = /(\d+)\D+(\d+)\D+(\d+)/;
var newStr = str.replace(re,function($0,$1,$2,$3){
    return $1+'年'+$2+'月'+$3+'日'; 
});