如何在 JavaScript 中连接正则表达式文字？答案

【问题标题】：How can I concatenate regex literals in JavaScript?如何在 JavaScript 中连接正则表达式文字？
【发布时间】：2010-09-16 04:15:09
【问题描述】：

有可能做这样的事情吗？

var pattern = /some regex segment/ + /* comment here */
    /another segment/;

或者我必须使用新的RegExp() 语法并连接一个字符串吗？我更喜欢使用文字，因为代码既不言而喻也更简洁。

【问题讨论】：

如果使用 String.raw()，处理转义的正则表达式字符会更容易：let regexSegment1 = String.raw`\s*hello\s*`

标签： javascript regex syntax

【解决方案1】：

以下是如何在不使用正则表达式文字语法的情况下创建正则表达式。这使您可以在字符串变为正则表达式对象之前进行任意字符串操作：

var segment_part = "some bit of the regexp";
var pattern = new RegExp("some regex segment" + /*comment here */
              segment_part + /* that was defined just now */
              "another segment");

如果你有两个正则表达式文字，你实际上可以使用这种技术将它们连接起来：

var regex1 = /foo/g;
var regex2 = /bar/y;
var flags = (regex1.flags + regex2.flags).split("").sort().join("").replace(/(.)(?=.*\1)/g, "");
var regex3 = new RegExp(expression_one.source + expression_two.source, flags);
// regex3 is now /foobar/gy

这比仅仅让表达式 1 和 2 成为文字字符串而不是文字正则表达式更冗长。

【讨论】：

请记住，使用此方法时，每个段都必须是有效的正则表达式。构造 new RegExp(/(/.source + /.*/.source + /)?/.source); 之类的表达式似乎不起作用。
此解决方案不适用于反向匹配组。在这种情况下，请参阅我的答案以获得可行的解决方案。
如果需要转义字符，则使用双反斜杠：new Regexp('\\$' + "flum")
如果需要，您可以使用“.flags”访问标志，因此理论上您也可以将它们组合起来。
你从哪里得到expression_one？你的意思是regex1？

【解决方案2】：

只是随机连接正则表达式 objects 可能会产生一些不利的副作用。请改用RegExp.source：

var r1 = /abc/g;
var r2 = /def/;
var r3 = new RegExp(r1.source + r2.source, 
                   (r1.global ? 'g' : '') 
                   + (r1.ignoreCase ? 'i' : '') + 
                   (r1.multiline ? 'm' : ''));
console.log(r3);
var m = 'test that abcdef and abcdef has a match?'.match(r3);
console.log(m);
// m should contain 2 matches

这也将使您能够使用标准 RegExp 标志保留以前 RegExp 中的正则表达式标志。

jsFiddle

【讨论】：

这可以使用RegExp.prototype.flags进行改进

【解决方案3】：

我不太同意“eval”选项。

var xxx = /abcd/;
var yyy = /efgh/;
var zzz = new RegExp(eval(xxx)+eval(yyy));

将给出“//abcd//efgh//”，这不是预期的结果。

使用类似的来源

var zzz = new RegExp(xxx.source+yyy.source);

将给出“/abcdefgh/”，这是正确的。

逻辑上不需要评估，你知道你的表达。您只需要它的 SOURCE 或它的编写方式，而不是它的值。至于标志，你只需要使用正则表达式的可选参数。

在我的情况下，我确实遇到了 ^ 和 $ 被用于我试图连接在一起的几个表达式的问题！这些表达式是整个程序中使用的语法过滤器。现在我不想用它们中的一些来处理介词的情况。我可能必须“切片”源以删除开始和结束 ^( 和/或 )$ :) 干杯，亚历克斯。

【讨论】：

我喜欢使用源属性。如果你 - 像我一样 - 使用 jslint，如果你做这样的事情它会唠叨：var regex = "\.\..*"

【解决方案4】：

问题如果正则表达式包含像 \1 这样的反向匹配组。

var r = /(a|b)\1/  // Matches aa, bb but nothing else.
var p = /(c|d)\1/   // Matches cc, dd but nothing else.

那么仅仅污染源是行不通的。确实，两者的结合是：

var rp = /(a|b)\1(c|d)\1/
rp.test("aadd") // Returns false

解决办法： 首先我们计算第一个正则表达式中匹配组的数量，然后对于第二个中的每个反向匹配标记，我们将其增加匹配组的数量。

function concatenate(r1, r2) {
  var count = function(r, str) {
    return str.match(r).length;
  }
  var numberGroups = /([^\\]|^)(?=\((?!\?:))/g; // Home-made regexp to count groups.
  var offset = count(numberGroups, r1.source);    
  var escapedMatch = /[\\](?:(\d+)|.)/g;        // Home-made regexp for escaped literals, greedy on numbers.
  var r2newSource = r2.source.replace(escapedMatch, function(match, number) { return number?"\\"+(number-0+offset):match; });
  return new RegExp(r1.source+r2newSource,
      (r1.global ? 'g' : '') 
      + (r1.ignoreCase ? 'i' : '')
      + (r1.multiline ? 'm' : ''));
}

测试：

var rp = concatenate(r, p) // returns  /(a|b)\1(c|d)\2/
rp.test("aadd") // Returns true

【讨论】：

是的（不过我不会在这里修改它）。这个函数是关联的，所以你可以使用下面的代码：function concatenateList() { var res = arguments[0]; for(var i = 1; i < arguments.length; i++) { res = concatenate(res, arguments[i]); } return res; }

【解决方案5】：

前提是：

你知道你在你的正则表达式中做了什么；
您有许多正则表达式片段来形成一个模式，它们将使用相同的标志；
您发现将小模式块分成一个数组更易读；
您还希望以后能够为下一个开发人员或您自己评论每个部分；
比起new RegExp('this', 'g')，您更喜欢像/this/g 这样直观地简化您的正则表达式；
您可以在一个额外的步骤中组装正则表达式，而不是从一开始就将其组装成一个整体；

那么你可能喜欢这样写：

var regexParts =
    [
        /\b(\d+|null)\b/,// Some comments.
        /\b(true|false)\b/,
        /\b(new|getElementsBy(?:Tag|Class|)Name|arguments|getElementById|if|else|do|null|return|case|default|function|typeof|undefined|instanceof|this|document|window|while|for|switch|in|break|continue|length|var|(?:clear|set)(?:Timeout|Interval))(?=\W)/,
        /(\$|jQuery)/,
        /many more patterns/
    ],
    regexString  = regexParts.map(function(x){return x.source}).join('|'),
    regexPattern = new RegExp(regexString, 'g');

然后您可以执行以下操作：

string.replace(regexPattern, function()
{
    var m = arguments,
        Class = '';

    switch(true)
    {
        // Numbers and 'null'.
        case (Boolean)(m[1]):
            m = m[1];
            Class = 'number';
            break;

        // True or False.
        case (Boolean)(m[2]):
            m = m[2];
            Class = 'bool';
            break;

        // True or False.
        case (Boolean)(m[3]):
            m = m[3];
            Class = 'keyword';
            break;

        // $ or 'jQuery'.
        case (Boolean)(m[4]):
            m = m[4];
            Class = 'dollar';
            break;

        // More cases...
    }

    return '<span class="' + Class + '">' + m + '</span>';
})

在我的特定情况下（类似代码镜像的编辑器），执行一个大的正则表达式要容易得多，而不是像每次我用 html 标记替换以包装表达式时那样进行大量替换，在不影响 html 标记本身的情况下，下一个模式将更难定位（并且没有 javascript 不支持的良好 lookbehind）：

.replace(/(\b\d+|null\b)/g, '<span class="number">$1</span>')
.replace(/(\btrue|false\b)/g, '<span class="bool">$1</span>')
.replace(/\b(new|getElementsBy(?:Tag|Class|)Name|arguments|getElementById|if|else|do|null|return|case|default|function|typeof|undefined|instanceof|this|document|window|while|for|switch|in|break|continue|var|(?:clear|set)(?:Timeout|Interval))(?=\W)/g, '<span class="keyword">$1</span>')
.replace(/\$/g, '<span class="dollar">$</span>')
.replace(/([\[\](){}.:;,+\-?=])/g, '<span class="ponctuation">$1</span>')

【讨论】：

【解决方案6】：

最好尽可能多地使用文字语法。它更短、更易读，并且您不需要转义引号或双重转义反冲。来自“Javascript 模式”，Stoyan Stefanov 2010。

但使用 New 可能是连接的唯一方法。

我会避免评估。它不安全。

【讨论】：

我认为复杂的正则表达式在分解和评论时更清晰。

【解决方案7】：

您可以从文字和 RegExp 类中连接正则表达式源代码：

var xxx = new RegExp(/abcd/);
var zzz = new RegExp(xxx.source + /efgh/.source);

【讨论】：

【解决方案8】：

你可以这样做：

function concatRegex(...segments) {
  return new RegExp(segments.join(''));
}

段将是作为单独参数传入的字符串（而不是正则表达式文字）。

【讨论】：

【解决方案9】：

不，不支持文字方式。你必须使用正则表达式。

【讨论】：

【解决方案10】：

使用带有 2 个参数的构造函数并避免尾随 '/' 的问题：

var re_final = new RegExp("\\" + ".", "g");    // constructor can have 2 params!
console.log("...finally".replace(re_final, "!") + "\n" + re_final + 
    " works as expected...");                  // !!!finally works as expected

                         // meanwhile

re_final = new RegExp("\\" + "." + "g");              // appends final '/'
console.log("... finally".replace(re_final, "!"));    // ...finally
console.log(re_final, "does not work!");              // does not work

【讨论】：

【解决方案11】：

对我来说更简单的方法是将源连接起来，例如：

a = /\d+/
b = /\w+/
c = new RegExp(a.source + b.source)

c 值将导致：

/\d+\w+/

【讨论】：

【解决方案12】：

我更喜欢使用eval('your expression')，因为它不会像='new RegExp'那样在每一端添加//。

【讨论】：