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

最新推荐文章于 2022-09-13 13:49:43 发布

GuMoYu

最新推荐文章于 2022-09-13 13:49:43 发布

阅读量227

点赞数

分类专栏： # js正则表达式 ECMA_javascript 文章标签： javascript 正则表达式

本文链接：https://blog.csdn.net/m0_52228571/article/details/119649270

版权

ECMA_javascript 同时被 2 个专栏收录

16 篇文章 1 订阅

订阅专栏

js正则表达式

5 篇文章 0 订阅

订阅专栏

javascript正则表达式

1、分组
2、分组有四种类型：
- 2.1、捕获型　　　-　()
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、反向前瞻型　-　(?!)
我们之前说的都是捕获型分组，只有这种分组会暂存匹配到的串。其他分组将在下一章介绍

GuMoYu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
十分钟掌握正则表达式！4_分组匹配_捕获形分组

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(/[
复制链接

扫一扫