正则表达式：在某些情况下不起作用

Question

我真的是regex新手，并且正在练习。 首先检查以下代码：

$(".app").each(function(){
    var raw_string = $(this).html();
    var changed_string = raw_string.replace(/^\{\{|\}\}$/g, "");
    $(this).html(eval(changed_string));
});

我正在尝试查看.app的HTML，并搜索以小胡子{{开始，以小胡子}}结尾的任何内容。 就像Mustache.js一样。 首先，我将其替换为空字符串，然后将.app的HTML设置为eval(changed_string) 。 因此，如果我尝试：

<div class="app">

    {{2+2}}

</div>

绝对可以正常打印4.但是：

问题

如果我向.app添加一些其他HTML：

<div class="app">

    2 and 2 are: {{2+2}}

</div>

输出为：

2 and 2 are: {{2+2}}

怎么了？？？

JsFiddle示范

Answer 1

修复表达式（您要匹配字符串的开头/结尾）仍然无法解决问题； 您将尝试评估整个字符串，包括“ 2和2 are：...”。

试试看，替换每对{{...}}的东西：

$(".app").each(function(){
    var raw_string = $(this).html();
    var changed_string = raw_string.replace(/\{\{(.+)\}\}/g, 
      function( match, p1 ) {
        return(eval(p1));
      }                                     
    );
    $(this).html(changed_string);
});

Answer 2

问题是您的.replace（...）不能捕获胡须之间的内容，而只是去除胡须。 因此，在第二种情况下，您然后尝试评估一个字符串而不是一个有效的表达式，即eval("2 and 2 are: 2+2");

修复方法是使用捕获组()匹配.exec或.match，并为eval提取捕获的字符串。

    $(".app").each(function(){
        var raw_string = $(this).html();
        var reg = new RegExp(/\{\{(.*)\}\}/);
        var formula = reg.exec(raw_string); // captures orig string in formula[0], first match in formula[1]
        $(this).html(eval(formula[1]));
    });