javascript - 使用正则表达式在 HTML 中查找 Mustache 变量

Question

我正在编写一些解析模板文件的代码，我要做的第一件事就是删除模板中的所有 Mustache 变量。在大多数情况下， mustache 变量如下所示:

{{variable}}, {{#loop}}{{content}}{{/loop}}, {{^not}}{{/not}}, {{! comment }}, {{#if}}{{/if}}

到目前为止，我一直在使用这个正则表达式替换，它可以很好地删除所有这些变量:

markup.replace(/\{\{[^\}\}]*\}\}/g, "")

我刚刚遇到了一个问题，但我发现了包含一些 javascript 代码的 Mustache 注释。

{{! App.doStuff('magic_string')({flag:true, flag2: true}); }}

• 注意:注释中的 .js 代码不包含 }}。

以前，我认为我的正则表达式会查找 {{ ，直到找到 }} (恰好是连续 2 个) ([^\}\}])，但情况似乎并非如此。一旦找到单个 }，匹配就会停止，并且无法从模板文件中删除此注释，因为它无法匹配开始和结束 {{ }}.

问题:我的正则表达式应该如何更新，以便它从“{{”到“}}”匹配，而不会停在单个“}”？

<小时/>

运行示例:

"<p>{{! App.doStuff('magic_string')({flag:true, flag2: true}); }}</p>".replace(/\{\{[^\}\}]*\}\}/g, "");
"<p>{{! App.doStuff('magic_string')({flag:true, flag2: true}); }}</p>" 
// bad! - should be "<p></p>"

"<p>{{test}}</p>".replace(/\{\{[^\}\}]*\}\}/g, "");
"<p></p>" // good

"<p>{{#test}}{{.}}{{/test}}</p>".replace(/\{\{[^\}\}]*\}\}/g, "");
"<p></p>" // good

"<p>{{>partial}}</p>".replace(/\{\{[^\}\}]*\}\}/g, "");
"<p></p>" //good

"<p {{#flag}}class='fancy'{{/flag}}></p>".replace(/\{\{[^\}\}]*\}\}/g, "");
"<p class='fancy'></p>" //good

Answer 1

给你，

> "<p>{{! App.doStuff('magic_string')({flag:true, flag2: true}); }}</p>".replace(/\{\{(?:(?!}}).)*\}\}/g, "")
'<p></p>'

DEMO

说明:

\{                       '{'
\{                       '{'
(?:                      group, but do not capture (0 or more
                         times):
  (?!                      look ahead to see if there is not:
    }}                       '}}'
  )                        end of look-ahead
  .                        any character except \n
)*                       end of grouping
\}                       '}'
\}                       '}'