javascript - 为什么 JavaScript 正则表达式中的交替(竖线)运算符 (|) 不给我两个匹配项？

Question

这是我的正则表达式:

"button:not([DISABLED])".match(/\([^()]+\)|[^()]+/g);

结果是:

["button:not", "([DISABLED])"]

是否正确？我很困惑。因为(管道)运算符 | 表示“或”，所以我认为正确的结果是:

["button:not", "[DISABLED]", "([DISABLED])"] 

因为这个:

["button:not", "[DISABLED]"]

是以下结果:

"button:not([DISABLED])".match(/[^()]+/g);

还有这个:

["([DISABLED])"]

是以下结果:

"button:not([DISABLED])".match(/\([^()]+\)/g);

但是控制台中的结果输出告诉我结果是:

["button:not", "([DISABLED])"]

问题出在哪里？

Answer 1

正则表达式

/\([^()]+\)|[^()]+/g

基本上说:有两个选项，匹配 (1) \([^()]+\) OR (2) [^() ]+，无论你在哪里看到它们(/g)。

让我们迭代您的示例字符串，以便您了解获得结果背后的原因。

起始字符串:

button:not([DISABLED])

步骤:

• 光标开始于字符 b ^{(实际上它开始于字符串开始 anchor ^，但是对于这个例子，它是无关紧要的)}。
• 在两个可用选项之间，b只能匹配(2)，因为(1)> 需要一个起始 (。
  • 现在它已经开始匹配 (2)，它将一直匹配它，这意味着它将消耗所有不是 ( 或 )。
  • 从上面的项目开始，它消耗了直到(包括)t 字符的所有内容(因为下一个字符是 ( 不匹配 [^()]+) 因此 将 button:not 作为第一个匹配的字符串。。
• _{^{(为清楚起见)}}
• 现在光标位于 (。是否开始匹配任何选项？是的，第一个:\([^()] +\)。
  • 同样，既然它已经开始匹配 (1)，它将一直通过它，这意味着它将消耗所有不是 ( 或 ) 直到它找到一个 ) ^{(如果在消费时发现 ( 在 ) 之前，它将回溯，因为这意味着 < strong>(1) 正则表达式最终不匹配)}。
  • 现在它继续消耗所有剩余的字符，直到找到 )，然后 ([DISABLED]) 成为第二个匹配的字符串。
• _{^{(为清楚起见)}}
• 由于我们到达了最后一个字符，正则表达式处理结束。

---

编辑:有一个非常有用的online tool这使您可以以图形形式查看正则表达式。也许有助于理解正则表达式的工作原理:

你也可以一步一步移动光标，看看我上面试图解释的内容: live link .

注意由 | 分隔的表达式的优先级:由于 JavaScript 正则表达式引擎处理字符串的方式，表达式出现的顺序很重要。它将按照给定的顺序评估每个备选方案。如果一个是那些选项匹配到最后，它不会尝试匹配任何其他选项，即使它可以。希望一个例子能让它更清楚:

"aaa".match(/a|aa|aaa/g); // ==> ["a", "a", "a"]
"aaa".match(/aa|aaa|a/g); // ==> ["aa", "a"]
"aaa".match(/aaa|a|aa/g); // ==> ["aaa"]