07-分支

17.6　分支

如果有一个以字符串形式存储的HTML页面，想找出其中所有引用外部资源的标签（ <a> 、 <area> 、 <link> 、 <script> 、 <source> ，有时候还有 <meta> ）。此外，可能还有一些标签是混合大小写的（例如 <Area> 和 <LINKS> ）。正则表达式中的分支可以解决这个问题：

const html = 'HTML with <a href="/one">one link</a>,and some JavaScript.' +
   '<script src="stuff.js"></script>';
const matches = html.match(/area|a|link|script|source/ig);  // 第一次尝试

竖线（|）是一个正则表达式元字符，它表示分支。ig表示忽略大小写（i）和全局搜索（g）。没有g的话，只会返回第一个匹配项。这个正则表达式会被解读为“查找文本中所有的area、a、link、script或source，并忽略大小写”。聪明的读者可能会好奇为什么把area放在a之前，这是因为正则表达式是从左到右执行分支匹配的。换句话说，如果字符串包含了area标签，它会匹配上a然后继续移动。此时a会被消费，而rea则匹配不上任何元素。所以必须先匹配area，然后再匹配a，否则，area将匹配失败。

如果运行这个例子，会发现有很多意料之外的匹配项：单词link（在标签内部），字母a不是一个HTML标签，它只是英文单词中的一部分。解决这个问题的一个办法是将正则表达式修改为 /<area|<a|<link|<script|<source/ （尖括号不是正则表达式元字符），但即便如此，还是会遇到更加复杂的情况。