原文链接：http://javascript.info/regexp-alternation，translate with ❤️ by zhangbao.

在正则表达式里，”或“用垂直线字符 | 表示。

例如，我们想要找到编程语言：HTML、PHP、Java 或者 JavaScript。

对应的正则表达式是：html|php|java(script)?。

小例子：

  1. let reg = /html|php|css|java(script)?/gi;
  3. let str = 'First HTML appeared, then CSS, then JavaScript';
  5. alert( str.match(reg) ); // HTML,CSS,JavaScript

我们之前已经学到过一个类似的结构——方括号。允许在众多的字符里选择一个，例如，gr[ae]y 匹配 gray 或者 grey。

| 符号作用的范围不是字符级别的，而是表达式级别的。正则 A|B|C 表示匹配表达式 A、B 和 C 里面的任意一个。

例如：

  • gr(a|e)y 等同于 gr[ae]y。

  • gra|ey 表示匹配”gra“或者”ey“。

为了让可选部分（|）从整个模式里分离出来，我们通常将它包围在圆括号里，像这样：before(XXX|YYY)after。

匹配时间的正则

在前面的章节里，有一个任务是构建一个查找时间（形如 hh::mm） 的正则，例如，12:00。但是简单的使用 \d\d:\d\d 太粗糙了，25:99 这样的不合法的事件都会被匹配。

我们怎么写出一个更精细的呢？

我们来深入探讨一下：

  • 第一个数字必须是 0 或者 1，然后后面跟一个任意数字。

  • 或者是 2 后面跟 [0-3]。

写成正则：[01]\d|2[0-3]。

然后我们再加上冒号和分钟。

分钟是从 0 到 59，用正则表达式表示是第一块 [0-5] 后面跟上另一个数字 \d。

让我们和在一起：[01]\d|2[0-3]:[0-5]\d。

几乎已经完成了，但是有一个问题。或 | 出现在 [0-1]\d 和 2[0-3]:[0-5]\d。这错了，因为它匹配的是左边或者右边部分：

  1. let reg = /[01]\d|2[0-3]:[0-5]\d/g;
  3. alert("12".match(reg)); // 12 （匹配到了 [01]\d）

这是相当明显的，但在开始使用正则表达式时，仍然经常出现这种错误。

我们需要添加括号来准确地应用可选的时间：[01]\d 或 2[0-3]。

正确的正则：

  1. let reg = /([01]\d|2[0-3]):[0-5]\d/g;
  3. alert( '00:00 10:10 23:59 25:99 1:2'.match(reg) ); // 00:00,10:10,23:59

（完）