javascript正则表达式分组捕获理解

我们先来看一段js代码：

var rquickExpr = /^(?:(<[wW]+>)[^>]*|#([w-]*))$/;
console.log(rquickExpr.exec('#div'));//["#div", undefined, "div", index: 0, input: "#div"]
console.log(rquickExpr.exec('<li>'));//["<li>", "<li>", undefined, index: 0, input: "<li>"]

解释： (?:(<[wW]+>)[^>]*|#([w-]*)) 中的 (<[wW]+>)[^>]* 或者 #([w-]*) 是不捕获的。

有三个提示捕获的地方：

1. ^(?:(<[wW]+>)[^>]*|#([w-]*))$  这个最长的。

2.(?:(<[wW]+>)[^>]*|#([w-]*))   中的 (<[wW]+>) 是捕获的， 所以 能捕获到，就是捕获的结果，不能捕获到就是 undefined.

3.(?:(<[wW]+>)[^>]*|#([w-]*))   中的  ([w-]*) 是捕获的， 所以 能捕获到，就是捕获的结果，不能捕获到就是 undefined.

第一个：rquickExpr.exec('#div')。

  1. 能匹配： ^(?:(<[wW]+>)[^>]*|#([w-]*))$，所以第一个是  #div

  2.不能匹配 :(<[wW]+>)[^>]* ，所以  (<[wW]+>) 这个捕获是  undefined.

  3.能匹配：#([w-]*)， 所以 ([w-]*) 这个捕获是 div

合起来就是 : ["#div", undefined, "div"]

第二个：rquickExpr.exec('<li>')。

 1. 能匹配： ^(?:(<[wW]+>)[^>]*|#([w-]*))$，所以第一个是  <li>

 2.能匹配 :(<[wW]+>)[^>]* ，所以  (<[wW]+>) 这个捕获是  <li>.

 3.不能匹配：#([w-]*)， 所以 ([w-]*) 这个捕获是 undefined.

合起来就是 : ["<li>", "<li>",undefined]