Regexp匹配中，为什么组匹配(.*?)匹配的是p1而不是""?

Question

最近在学习正则表达式，看了阮一峰大神的regexp教程，在4.3 replace方法的后面代码中遇到一个问题：

var prices = {
  'p1': '$1.99',
  'p2': '$9.99',
  'p3': '$5.00'
};

var template = '<span id="p1"></span>'
  + '<span id="p2"></span>'
  + '<span id="p3"></span>';

template.replace(
  /(<span id=")(.*?)(">)(<\/span>)/g,
  function(match, $1, $2, $3, $4){
    return $1 + $2 + $3 + prices[$2] + $4;
  }
);

中间的第二个组匹配(.*?)匹配出的内容是p1,p2,p3，为什么不是三个空字符串呢？
还望大神帮忙讲解一下，谢谢！

Answer 1

在量词后面添加 ? ，代表的是懒匹配，如：^a.*?b ，意思以匹配从 a 开始，往右找到第一个 b，中间的那一串就是匹配的结果，abcb 将匹配 ab，当去掉 ? 后，这个正则将匹配 abcb。

针对 <span id="p1"></span> 这一行来说，/(<span id=")(.*?)(">)(<\/span>)/ 的匹配结果如下

• Group 1: <span id="
• Group 2: p1 >> 懒匹配，找到第一个 > 就不再往后面找
• Group 3: ">
• Group 4: </span>

其它的都是类似的。

Answer 2

看你写的正则，第二组匹配的是<span>标签里面的id属性的值