Javascript正则表达式匹配模式，但不匹配正则表达式文字(r.js优化器和uglify问题)? [英] Javascript regex to match a pattern but NOT match a regex literal (r.js optimizer and uglify issue)?

问题描述

我有一个Backbone应用程序，使用Require.js分为模块.这些模块之一包含一个Handlebars帮助器，该帮助器具有一种方法，可用于从每个View的所有HTML模板中提取合法标头.标头包含在HTML注释中，因此我使用以下正则表达式将其剥离:

I've got a Backbone application, organized into modules using Require.js. One of these modules contains a Handlebars helper, which has a method I use to pull a legal header off of all our HTML templates for each View. The header is contained in an HTML comment, so I use the following regex to strip it off:

/<!--[\s\S]*?-->/g

现在，当我使用r.js优化(连接/编译/最小化)应用程序时，我正在使用r.js的onBuildWrite()方法进行相同的HTML注释删除:

Now, when I optimize (concatenate/compile/minify) the application using r.js, I'm doing the same removal of HTML comments using the onBuildWrite() method of r.js:

onBuildWrite: function (moduleName, path, contents) {
    var htmlCommentRegex = /<!--[\s\S]*?-->/g;

    return contents.replace(htmlCommentRegex, "");
},

现在，不幸的是，这意味着，当包含Handlebars帮助器的Require.js模块被拉入r.js优化的版本中时，该帮助器中的regex文字会被剥离，导致整个r.js会轰炸.

Now, unfortunately, this means that when the Require.js module containing the Handlebars helper is pulled into the r.js optimized build, the regex literal within the helper is stripped out, causing my entire r.js build to bomb out.

我试图通过选择性地将onBuildWrite()中的正则表达式应用于除帮助程序之外的所有模块来解决该问题:

I've tried to resolve the issue by selectively applying the regex in onBuildWrite() to all modules EXCEPT the helper:

onBuildWrite: function (moduleName, path, contents) {
    var htmlCommentRegex = /<!--[\s\S]*?-->/g;

    if (moduleName !== "helpers/handlebars.compileClean") {
        contents = contents.replace(htmlCommentRegex, "");
    }

    return contents;
},

但是，当在r.js配置中启用uglification时，这似乎不起作用； 正则表达式STILL似乎正在整个构建脚本(包括帮助程序)上运行，导致构建被炸毁.

But this doesn't appear to work when uglification is enabled in the r.js configuration; the regex STILL seems to be running on the entire built script, including the helper, causing the build to bomb out.

如果在r.js配置中禁用了uglify，则一切正常.

If uglify is disabled in the r.js config, everything works fine.

任何人都知道为什么uglify会打破这一点吗?是否要切换到其他正则表达式来解决此问题，该正则表达式将捕获HTML注释，但忽略HTML注释正则表达式文字，则可以解决此问题吗?如果是这样，那么该正则表达式是什么样的?

推荐答案

将您的正则表达式更改为:

Change your regexp to:

var htmlCommentRegex = /[<]!--[\s\S]*?-->/g;

就RE处理器而言，单字符[<]类与<等效，但是现在RE不再与自身匹配.

The single-character [<] class is equivalent to < as far as the RE processor is concerned, but now the RE no longer matches itself.

另一种方法是在RE中转义文字字符之一:

Another way is to escape one of the literal characters in the RE:

var htmlCommentRegex = /<\!--[\s\S]*?-->/g;

或者您可以根据字符串构建RE:

Or you could build the RE from strings:

var htmlCommentRegex = new RegExp('<!'+'--[\s\S]*?-->', 'g');

如果r.js将所有这些优化为原始文本，请尝试以下操作:

If r.js is optimizing all these back to the original text, try this:

var commentPrefix = '<!';
var htmlCommentRegex = new Regexp(commentPrefix+'--[\s\S]*?-->', 'g');

希望它没有进行足够的代码分析来消除这种混淆.

Hopefully it doesn't do enough code analysis to undo this obfuscation.

这篇关于Javascript正则表达式匹配模式，但不匹配正则表达式文字(r.js优化器和uglify问题)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！