正则表达式捕获分组和非捕获分组及用法

最新推荐文章于 2024-07-28 07:22:09 发布

前端岚枫

最新推荐文章于 2024-07-28 07:22:09 发布

阅读量2.6k

点赞数 1

分类专栏： js 文章标签： js 捕获组非捕获组 ?:

本文链接：https://blog.csdn.net/lfcss/article/details/102777630

版权

js 专栏收录该内容

101 篇文章 0 订阅

订阅专栏

正则表达式 (regular expression)是一个描述字符模式的对象。 ECMAScript 的 RegExp 类
表示正则表达式，而 String 和 RegExp 都定义了使用正则表达式进行强大的模式匹配和文本检索与替换的函数。
捕获组：把正则表达式中子表达式匹配的内容，保存到内存中以数字编号或显式命名的组里，方便后面引用。
例如：

var str = "2019-10-28";
var reg = /(\d{4})-(\d{2})-(\d{2})/;
var result = reg.exec(str)
console.log(result[0])
console.log(result[1])
console.log(result[2])
console.log(result[3])

如图：
在这里插入图片描述
非捕获分组：分组匹配之后，不需要的用?: 语法过滤子表达式内容。也就是代码匹配，但是不保存
代码如下：

var str = "2019-10-28";
var reg = /(\d{4})-(\d{2})-(?:\d{2})/;
var result = reg.exec(str)
console.log(result[0])
console.log(result[1])
console.log(result[2])
console.log(result[3])

如图：
在这里插入图片描述
在jQuery源码中，曾用到非捕获组的方法，获取字符串、标签、id选择器来做选择器表达式，如：

quickExpr = /^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/

正则 quickExpr 包含两个分组，依次匹配 HTML 代码和 id。如果匹配成功，则数组 match 的第一个元素为参数 selector，第二个元素为匹配的 HTML 代码或 undefined，第三个元素为匹配的 id 或 undefined。下面的例子测试了正则 quickExpr 的功能:

  quickExpr.exec( '#target' );   // ["#target", undefined, "target"]
  quickExpr.exec( '<div>' );      // ["<div>", "<div>", undefined]
  quickExpr.exec( 'abc<div>' );   // ["abc<div>", "<div>", undefined]
  quickExpr.exec( 'abc<div>abc#id' );   // ["abc<div>abc#id", "<div>", undefined]
   quickExpr.exec( 'div' );   // null
   quickExpr.exec( '<div><img></div>' ); // ["<div><img></div>", "<div><img>