js 正则 分组

正则 专栏收录该内容
1 篇文章 0 订阅

1. 分组:

用括号表示一个整体,如(ab)+,表示""两个字符连续出现多次;

var regex = /(ab)+/g;
var string = "ababa abbb ababab";
console.log( string.match(regex) ); 
// 结果为: ["abab", "ab", "ababab"]

 2. 引用分组:

使用一个正则来匹配日期格式为yyyy-mm-dd 的日期:

var regexp = /\d{4}-\d{2}-\d{2}/

 我们可以使用构造函数的全局属性$1至$9来获取

var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2019-11-24";

regex.test(string); //先正则匹配一次,可以是test()、exec()、以及String.match的正则方式
console.log(RegExp.$1); // 2019
console.log(RegExp.$2); // 11
console.log(RegExp.$3); // 24

3.反向引用

正则本身里可以引用分组,但只能引用之前出现的分组,即反向引用。

如:写一个正则支持匹配如下三种格式:

var str1 = '2019-11-24';
vat str2 = '2019/11/24';
var str3 = '2019.11.24';

最容易写的正则是: 

var regexp = /\d{4}(\.|-|\/)\d{2}(\.|-|\/)\d{2}/;
var str1 = '2019-11-24';
var str2 = '2019/11/24';
var str3 = '2019.11.24';
var str4 = '2019-11/24';
console.log(regexp.test(str1)); // true
console.log(regexp.test(str2)); // true
console.log(regexp.test(str3)); // true
console.log(regexp.test(str4)); // true

注意第四个,我们如果想要分隔符前后一致怎么办,此时就需要利用反向引用了。

var regexp = /\d{4}(\.|-|\/)\d{2}\1\d{2}/;
var str1 = '2019-11-24';
var str2 = '2019/11/24';
var str3 = '2019.11.24';
var str4 = '2019-11/24';
console.log(regexp.test(str1)); // true
console.log(regexp.test(str2)); // true
console.log(regexp.test(str3)); // true
console.log(regexp.test(str4)); // false

我们可以利用 https://regexper.com工具,该够让正则表达式字符串以 Railroad 形式图形化,便于咱们阅读及理解。

 

4.非捕获性分组

如果只想要括号最原始的功能,但不会引用它,即,既不在API里引用,也不在正则里反向引用。此时可以使用非捕获分组(?:p)

 如字符串123abcd456,先看捕获性分组匹配会得到什么结果:

var str = '123abc456';
var regexp = /([a-z]+)(\d+)/;
console.log(regexp.exec(str)); 
// ["abc456", "abc", "456", index: 3, input: "123abc456", groups: undefined]

发现子串也获取到了,这并不是我们想要的结果;

再看下非捕获性分组:

var str = '123abc456';
var regexp = /(?:[a-z]+)(?:\d+)/;
console.log(regexp.exec(str)); 
// ["abc456", index: 3, input: "123abc456", groups: undefined]

下面我们介绍下前瞻:(?=)和(?!)

前瞻分为正向前瞻和反(负)向前瞻,正向前瞻(?=表达式)表示后面要有什么,反向前瞻(?!表达式)表示后面不能有什么。

前瞻分组会作为匹配校验,但不出现在匹配结果字符里面,而且不作为子匹配返回。

正向前瞻匹配一批图片格式:

// 匹配.jpg后缀文件名
var str = '123.jpg,456.gif,abc.jpg';
var regexp = /\w+(?=\.jpg)/; // 正向前瞻匹配
console.log(str.match(regexp)); // ["123", "abc"]

 处理数字的千位分隔符:

如把"123456789"处理为"123,456,789"

匹配的位置不能是开头,可以使用(?!^)

var expreg = /(?!^)(?=(\d{3})+$)/g;
'123456789'.replace(expreg,','); // "123,456,789"

 

 反向前瞻匹配一批字母加数字

// 反向前瞻,匹配3个及以上的a,且后面不能有000的字符
var str = 'aaa000 aaa111 aaaaaa222';
var regexp = /a{3,}(?!000)/g;
console.log(str.match(regexp)); // ["aaa", "aaaaaa"]

 es6中新增了正向后顾(?<表达式)和反(负)向后顾(?<!表达式),正向后顾(?<=表达式)表示前面要有什么,反向后顾(?<!表达式)表示前面不能有什么。

'abcd'.replace(/(?<=abc)\w+/, '222') // abc222 表示前面需要有abc
'abcd'.replace(/(?!=abc)\w+/, '222') // 222 前面不能有abc

参考资料: JS正则表达式完整教程----分组

JavaScript正则表达式分组模式:捕获性分组与非捕获性分组及前瞻后顾(断言)

 

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值