javascript正則表達式分組捕獲理解

咱們先來看一段js代碼：

var rquickExpr = /^(?:(<[\w\W]+>)[^>]*|#([\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>"]

解釋： (?:(<[\w\W]+>)[^>]*|#([\w-]*)) 中的 (<[\w\W]+>)[^>]* 或者 #([\w-]*) 是不捕獲的。

有三個提示捕獲的地方：

1. ^(?:(<[\w\W]+>)[^>]*|#([\w-]*))$  這個最長的。

2.(?:(<[\w\W]+>)[^>]*|#([\w-]*))   中的 (<[\w\W]+>) 是捕獲的， 因此 能捕獲到，就是捕獲的結果，不能捕獲到就是 undefined.

3.(?:(<[\w\W]+>)[^>]*|#([\w-]*))   中的  ([\w-]*) 是捕獲的， 因此 能捕獲到，就是捕獲的結果，不能捕獲到就是 undefined.

 

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

  1. 能匹配： ^(?:(<[\w\W]+>)[^>]*|#([\w-]*))$，因此第一個是  #div

  2.不能匹配 :(<[\w\W]+>)[^>]* ，因此  (<[\w\W]+>) 這個捕獲是  undefined.

  3.能匹配：#([\w-]*)， 因此 ([\w-]*) 這個捕獲是 div

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

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

 1. 能匹配： ^(?:(<[\w\W]+>)[^>]*|#([\w-]*))$，因此第一個是  <li>

 2.能匹配 :(<[\w\W]+>)[^>]* ，因此  (<[\w\W]+>) 這個捕獲是  <li>.

 3.不能匹配：#([\w-]*)， 因此 ([\w-]*) 這個捕獲是 undefined.

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