十分钟掌握正则表达式！4_分组匹配_捕获形分组

古城微笑少年丶 2022-09-04 09:47 146阅读 0赞

### javascript正则表达式 ###

*  1、分组
 *   *  1.1、候选:一个分组中，可以有多个候选表达式，用|分隔：
     *  1.2、捕获与引用:
     *   *  1.2.1 与replace配合：
         *  1.2.2 给replace传迭代函数，有时能优雅地解决一些问题。
 *  2、分组有四种类型：
 *   *  2.1、捕获型　　　-　()
     *   *  2.1.1、 反向引用\_(基于分组)
         *  2.1.2、 匹配页面元素
         *  2.1.3 嵌套分组的捕获
 *  3、其他类型分组

# 1、分组 #

var str4 = "qwertyu"
    var str5 = "qwerbb"
    console.log(str4.match(/[a-z]*/));// ["qwertyu"]
    console.log(str4.match(/([a-z]*)/));// ["qwertyu", "qwertyu"]
    console.log(str5.match(/([a-z]*)(bb)/));// ["qwerbb", "qwer", "bb"]

## 1.1、候选:一个分组中，可以有多个候选表达式，用|分隔： ##

var regfz = /I love (him|her|it)/;
    console.log(regfz.test('I love him'));  // true
    console.log(regfz.test('I love her'));  // true
    console.log(regfz.test('I love it'));   // true
    console.log(regfz.test('I love them')); // false
    console.log("----------------------");

## 1.2、捕获与引用: ##

//被正则表达式匹配（捕获）到的字符串会被暂存起来。
    //其中，由分组捕获的串会从1开始编号，于是我们可以引用这些串：（$1引用了第一个被捕获的串，$2是第二个，依次类推。）
    var regbh = /(\d{4})-(\d{2})-(\d{2})/
    var date = '2010-04-12'
    regbh.test(date)
    console.log(RegExp.$1);// 2010
    console.log(RegExp.$2);// 04
    console.log(RegExp.$3);// 12

### 1.2.1 与replace配合： ###

// String.prototype.replace方法的传参中可以直接引用被捕获的串。比如我们想将日期12.21/2012改为2012-12-21：
    var regrep = /(\d{2}).(\d{2})\/(\d{4})/
    var date1 = '12.21/2012'
    date1 = date1.replace(regrep, '$3-$1-$2')
    console.log(date1);// date = 2012-12-21
    var naem = 'Xong xu, Chen'
    naem = naem.replace(/(\w+\s*\w+)\s*,\s*(\w+)/, '$2,$1')
    console.log(naem);//Chen,Xong xu

### 1.2.2 给replace传迭代函数，有时能优雅地解决一些问题。 ###

// 将违禁词转换为等字数的星号是一个常见功能。比如文本是kid is a doubi，其中kid与doubi是违禁词，
    // 那么转换后应该为*** is a *****。我们可以这么写：
    var regdd = /(kid|doubi)/g
    var strdd = 'kid is a doubi'
    strdd = strdd.replace(regdd, function (word) { 
        // word相当于正则匹配到的结果
        // console.log(word);//kid doubi
        return word.replace(/./g, '*')
    })
    console.log(strdd);//*** is a *****
    console.log("----------------------");

# 2、分组有四种类型： #

## 2.1、捕获型　　　-　() ##

// 只有捕获型分组会暂存匹配到的串。
    var csstr1 = 'ab=12,bc=23,def=45'
    var csreg1 = /(\w+)=(\d+)/g
    var result1 = null;
    while (result1 = csreg1.exec(csstr1)) { 
        console.log(result1);
        //["ab=12", "ab", "12", index: 0, input: "ab=12,bc=23,def=45", groups: undefined]
        //["bc=23", "bc", "23", index: 6, input: "ab=12,bc=23,def=45", groups: undefined]
        //["def=45", "def", "45", index: 12, input: "ab=12,bc=23,def=45", groups: undefined]
    }

### 2.1.1、 反向引用\_(基于分组) ###

// 正则表达式里也能进行引用，这称为反向引用：
    var regfx = /(\w{3}) is \1/
    regfx.test('kid is kid') // true
    regfx.test('dik is kid') // false
    // \1引用了第一个被分组所捕获的串，换言之，表达式是动态决定的。

### 2.1.2、 匹配页面元素 ###

// 很多时候，会提取页面标签正则判断。页面标签有个特点，就是会有个相同的闭合标签。
    var strfx1 = `"<html><h1>www.yehuozhili.cn</h1></html><html><h1>www.yehuozhili.cn</h1></html>"`
    var regfx1 = /\<(\w+\>).*?\1/g
    var regfx2 = /\<(\w*)\>.*?\<\/?\1\>/g
    console.log(strfx1.match(regfx1));//["<html><h1>www.yehuozhili.cn</h1></html>", "<html><h1>www.yehuozhili.cn</h1></html>"]
    console.log(strfx1.match(regfx2));//["<html><h1>www.yehuozhili.cn</h1></html>", "<html><h1>www.yehuozhili.cn</h1></html>"]
    
    // 匹配h1
    var regfx3 = /\<(h1)\>.*?\<\/?\1\>/g    // \/?——————指的是结束标签的/可有可无，如：</html>,<html>
    console.log(strfx1.match(regfx3));      //["<h1>www.yehuozhili.cn</h1>", "<h1>www.yehuozhili.cn</h1>"]
    console.log("----------------------");

### 2.1.3 嵌套分组的捕获 ###

var zfstr = ' abc 234 abc abc'
    console.log(zfstr.match(/(\s([a-z]+)\s)\d+\1\2/));// [" abc 234 abc abc", " abc ", "abc"]
    
    // 如果碰到类似/((kid) is (a (doubi)))/的嵌套分组，捕获的顺序是什么？来试试：
    var regqt = /((kid) is (a (doubi)))/
    var strqt = "kid is a doubi"
    
    regqt.test(strqt)     // true
    console.log(RegExp.$1); // kid is a doubi
    console.log(RegExp.$2); // kid
    console.log(RegExp.$3); // a doubi
    console.log(RegExp.$4); // doubi 
    // 规则是以左括号出现的顺序进行捕获。
    console.log("----------------------");

# 3、其他类型分组 #

2.2、非捕获型　　-　(?:)
    2.3、正向前瞻型　-　(?=)
    2.4、反向前瞻型　-　(?!)
    我们之前说的都是捕获型分组，只有这种分组会暂存匹配到的串。其他分组将在下一章介绍