正则表达式条件匹配单双引号：匹配templateUrl的HTML路径问题

我来帮你分析一下这两个正则的问题，以及给出更简洁的解决方案~

一、你的条件正则为什么失效？ #

你写的条件正则：

/templateUrl:\s*(?(?=')([^']+?\.html')|(?(?=")([^"]+?\.html")))/g

核心问题出在正向预查没有实际匹配引号，而且捕获组的写法有误：

• 正向预查(?=')只是判断当前位置后面是单引号，但不会把这个单引号纳入匹配结果；
• 紧接着你试图匹配([^']+?\.html')，但此时当前位置就在单引号的位置，[^']是匹配非单引号的字符，自然匹配不了这个单引号，导致整个分支直接失败；
• 同理，双引号的分支也存在同样的问题，预查后没有匹配开头的双引号，直接去匹配内容，必然失败。

简单说，你的条件正则只做了“预判”，却没真正吃掉开头的引号，后续的内容匹配自然接不上。

二、“或逻辑”的正则是否可行？ #

你写的这个表达式：

/templateUrl:\s*('([^']+?\.html)')|("([^"]+?\.html)")/g

是可行的，但有两个小缺点：

• 捕获组分散：匹配单引号时，目标路径在第2个捕获组；匹配双引号时，路径在第4个捕获组，后续取值需要判断哪个组有内容，不够方便；
• 冗余：单双引号的匹配逻辑重复了，不够简洁。

三、更优雅的解决方案 #

其实不用复杂的条件判断，用字符类+反向引用就能完美解决，写法如下：

/templateUrl:\s*(['"])([^'"]+?\.html)\1/g

解释一下这个正则的逻辑：

• (['"])：用捕获组1匹配开头的单引号或双引号；
• ([^'"]+?\.html)：捕获组2匹配html路径，[^'"]+?确保只匹配到和开头相同的引号之前的内容；
• \1：反向引用捕获组1的内容，也就是和开头一致的引号，确保闭合的引号和开头匹配（单引号对应单引号，双引号对应双引号）。

这个写法既简洁，又能保证单双引号的一致性，而且目标路径始终在捕获组2里，取值非常方便。

内容的提问来源于stack exchange，提问作者Sampgun