http://www.nowamagic.net/librarys/veda/detail/1038

惰性匹配(lazy)

它会匹配尽可能少的字符,它从第一个字符开始找起,一旦符合条件,立刻保存到匹配集合中,然后继续进行查找。所以说它是懒惰的。

还是这个例子:

nowamagic.net is a good website to learn IT skills.

      <td class="content">
        <code class="plain">.*</code>
      </td>
    </tr>
  </table>

效果演示

本例代码

      <td class="content">
        <code class="keyword">function</code> <code class="plain">reg_replace()</code>
      </td>
    </tr>
  </table>


<div class="line alt2">
  <table>
    <tr>
      <td class="number">
        <code>2</code>
      </td>
      
      <td class="content">
        <code class="plain">{</code>
      </td>
    </tr>
  </table>


<div class="line alt1">
  <table>
    <tr>
      <td class="number">
        <code>3</code>
      </td>
      
      <td class="content">
        <code class="spaces">    </code><code class="keyword">var</code> <code class="plain">test = document.getElementById(</code><code class="string">"test"</code><code class="plain">);</code>
      </td>
    </tr>
  </table>


<div class="line alt2">
  <table>
    <tr>
      <td class="number">
        <code>4</code>
      </td>
      
      <td class="content">
        <code class="spaces">    </code><code class="plain">aim = </code><code class="string">".* "</code><code class="plain">;</code>
      </td>
    </tr>
  </table>


<div class="line alt1">
  <table>
    <tr>
      <td class="number">
        <code>5</code>
      </td>
      
      <td class="content">
        <code class="spaces">    </code><code class="keyword">var</code> <code class="plain">regex = </code><code class="keyword">new</code> <code class="plain">RegExp(</code><code class="string">"("</code><code class="plain">+aim+</code><code class="string">")"</code><code class="plain">,</code><code class="string">"g"</code><code class="plain">);</code>
      </td>
    </tr>
  </table>


<div class="line alt2">
  <table>
    <tr>
      <td class="number">
        <code>6</code>
      </td>
      
      <td class="content">
        <code class="spaces">    </code><code class="plain">test.innerHTML = test.innerHTML.replace(regex,</code><code class="string">"<span style='background-color:orange'>$1"</code><code class="plain">);</code>
      </td>
    </tr>
  </table>


<div class="line alt1">
  <table>
    <tr>
      <td class="number">
        <code>7</code>
      </td>
      
      <td class="content">
        <code class="plain">}</code>
      </td>
    </tr>
  </table>

这样匹配显然不是我们的初衷,它仅找到了一个匹配,而通常情况下,我们希望得到的是good 和 learn 两个匹配。

解决的办法,就是上面说到的惰性匹配,它的语法如下表所示:

<td>
  惰性匹配
</td>

<td>
  匹配描述
</td>
<td>
  ??
</td>

<td>
  匹配 0 个或 1 个
</td>
<td>
  +?
</td>

<td>
  匹配 1 个或多个
</td>
<td>
  *?
</td>

<td>
  匹配 0 个或多个
</td>
<td>
  {n}?
</td>

<td>
  匹配 n 个
</td>
<td>
  {n,m}?
</td>

<td>
  匹配 n 个或 m 个
</td>
<td>
  {n,}?
</td>

<td>
  匹配 n 个或多个
</td>

对于本例,当我们再使用惰性匹配。

      <td class="content">
        <code class="plain">.*?</code>
      </td>
    </tr>
  </table>

效果演示

惰性匹配的匹配过程

      <td class="content">
        <code class="plain">n   </code><code class="comments">// 不匹配,继续</code>
      </td>
    </tr>
  </table>


<div class="line alt2">
  <table>
    <tr>
      <td class="number">
        <code>02</code>
      </td>
      
      <td class="content">
        <code class="plain">no  </code><code class="comments">// 不匹配,继续</code>
      </td>
    </tr>
  </table>


<div class="line alt1">
  <table>
    <tr>
      <td class="number">
        <code>03</code>
      </td>
      
      <td class="content">
        <code class="plain">...  </code><code class="comments">// 中间略</code>
      </td>
    </tr>
  </table>


<div class="line alt2">
  <table>
    <tr>
      <td class="number">
        <code>04</code>
      </td>
      
      <td class="content">
        <code class="plain">nowamagic.net is a <span style=</code><code class="string">"background-color:orange"</code><code class="plain">><    </code><code class="comments">// 找到可能匹配的字符,继续</code>
      </td>
    </tr>
  </table>


<div class="line alt1">
  <table>
    <tr>
      <td class="number">
        <code>05</code>
      </td>
      
      <td class="content">
        <code class="plain">nowamagic.net is a <span style=</code><code class="string">"background-color:orange"</code><code class="plain">><b   </code><code class="comments">// 找到可能匹配的字符,继续</code>
      </td>
    </tr>
  </table>


<div class="line alt2">
  <table>
    <tr>
      <td class="number">
        <code>06</code>
      </td>
      
      <td class="content">
        <code class="plain">...  </code><code class="comments">// 中间略</code>
      </td>
    </tr>
  </table>


<div class="line alt1">
  <table>
    <tr>
      <td class="number">
        <code>07</code>
      </td>
      
      <td class="content">
        <code class="comments">//找到匹配,保存到结果集中,继续进行剩下的文本。</code>
      </td>
    </tr>
  </table>


<div class="line alt2">
  <table>
    <tr>
      <td class="number">
        <code>08</code>
      </td>
      
      <td class="content">
        <code class="plain">nowamagic.net is a <span style=</code><code class="string">"background-color:orange"</code><code class="plain">>good website to learn IT skills</c>.</code>
      </td>
    </tr>
  </table>


<div class="line alt1">
  <table>
    <tr>
      <td class="number">
        <code>09</code>
      </td>
      
      <td class="content">
        <code class="plain">w   </code><code class="comments">// 不匹配,继续</code>
      </td>
    </tr>
  </table>


<div class="line alt2">
  <table>
    <tr>
      <td class="number">
        <code>10</code>
      </td>
      
      <td class="content">
        <code class="plain">we  </code><code class="comments">// 不匹配,继续</code>
      </td>
    </tr>
  </table>


<div class="line alt1">
  <table>
    <tr>
      <td class="number">
        <code>11</code>
      </td>
      
      <td class="content">
        <code class="plain">website to <span style=</code><code class="string">"background-color:orange"</code><code class="plain">><        </code><code class="comments">// 找到可能的匹配,继续  </code>
      </td>
    </tr>
  </table>


<div class="line alt2">
  <table>
    <tr>
      <td class="number">
        <code>12</code>
      </td>
      
      <td class="content">
        <code class="plain">website to <span style=</code><code class="string">"background-color:orange"</code><code class="plain">><b   </code><code class="comments">// 找到可能的匹配,继续</code>
      </td>
    </tr>
  </table>


<div class="line alt1">
  <table>
    <tr>
      <td class="number">
        <code>13</code>
      </td>
      
      <td class="content">
        <code class="plain">...  </code><code class="comments">// 中间略</code>
      </td>
    </tr>
  </table>


<div class="line alt2">
  <table>
    <tr>
      <td class="number">
        <code>14</code>
      </td>
      
      <td class="content">
        <code class="comments">//找到匹配,保存到结果集中,继续进行剩下的文本。</code>
      </td>
    </tr>
  </table>


<div class="line alt1">
  <table>
    <tr>
      <td class="number">
        <code>15</code>
      </td>
      
      <td class="content">
        <code class="plain">website to <span style=</code><code class="string">"background-color:orange"</code><code class="plain">>learn</code>
      </td>
    </tr>
  </table>


<div class="line alt2">
  <table>
    <tr>
      <td class="number">
        <code>16</code>
      </td>
      
      <td class="content">
        <code class="plain">I   </code><code class="comments">//不匹配,继续</code>
      </td>
    </tr>
  </table>


<div class="line alt1">
  <table>
    <tr>
      <td class="number">
        <code>17</code>
      </td>
      
      <td class="content">
        <code class="plain">IT  </code><code class="comments">//不匹配,继续</code>
      </td>
    </tr>
  </table>


<div class="line alt2">
  <table>
    <tr>
      <td class="number">
        <code>18</code>
      </td>
      
      <td class="content">
        <code class="plain">IT <span style=</code><code class="string">"background-color:orange"</code><code class="plain">><    </code><code class="comments">// 找到可能的匹配,继续</code>
      </td>
    </tr>
  </table>


<div class="line alt1">
  <table>
    <tr>
      <td class="number">
        <code>19</code>
      </td>
      
      <td class="content">
        <code class="plain">IT <span style=</code><code class="string">"background-color:orange"</code><code class="plain">><b   </code><code class="comments">// 找到可能的匹配,继续</code>
      </td>
    </tr>
  </table>


<div class="line alt2">
  <table>
    <tr>
      <td class="number">
        <code>20</code>
      </td>
      
      <td class="content">
        <code class="plain">...  </code><code class="comments">// 中间略</code>
      </td>
    </tr>
  </table>


<div class="line alt1">
  <table>
    <tr>
      <td class="number">
        <code>21</code>
      </td>
      
      <td class="content">
        <code class="plain">IT <span style=</code><code class="string">"background-color:orange"</code><code class="plain">>skills</c>.  </code><code class="comments">// 匹配失败,继续找</code>
      </td>
    </tr>
  </table>


<div class="line alt2">
  <table>
    <tr>
      <td class="number">
        <code>22</code>
      </td>
      
      <td class="content">
        <code class="plain">IT skills</c>.   </code><code class="comments">// 不匹配,继续</code>
      </td>
    </tr>
  </table>


<div class="line alt1">
  <table>
    <tr>
      <td class="number">
        <code>23</code>
      </td>
      
      <td class="content">
        <code class="comments">// 字符串结束,匹配结束。一共找到了两个匹配good和learn</code>
      </td>
    </tr>
  </table>


<div class="line alt2">
  <table>
    <tr>
      <td class="number">
        <code>24</code>
      </td>
      
      <td class="content">
        <code class="plain">IT skills</c>.</code>
      </td>
    </tr>
  </table>

我们回顾一下上面 “\d{1,3}” 匹配数字的例子,对于"1234”,当我们使用”\d{1,3}“时,进行的是贪婪匹配,它首先找到"123”(因为"1234"不符合),之后的"4"也符合,所以,找到的匹配是"123"和"4”。

当我们使用”\d{1,3}?“匹配上面的例子,对于"1234”,这次是惰性匹配。首先,发现"1"符合,将"1"保存到匹配集合中;随后,依次发现"2”、“3”、“4"符合,并依次保存到结果集中,最后,我们得到了四个匹配"1”、“2”、“3”、“4”。