javascript - 当没有匹配项时，正则表达式性能不佳

Question

我遇到正则表达式运行缓慢的问题，但仅限于模式不匹配的情况。在所有其他情况下，性能是可以接受的，即使模式在文本末尾匹配。我正在测试 100KB 文本输入的性能。

我想做的是将输入转换为类似 HTML 的语法，使用 [] 而不是 <> 括号，并将其转换为有效的 XML。

示例输入:

...some content[vc_row param="test1"][vc_column]text [brackets in text] content[/vc_column][/vc_row][vc_row param="xxx"]text content[/vc_row]...some more content

示例输出:

...some content<div class="vc_row" param="test1"><div class="vc_column" >text [brackets in text] content</div></div><div class="vc_row" param="xxx">text content</div>...some more content

为此，我使用正则表达式:

/(.*)(\[\/?vc_column|\[\/?vc_row)( ?)(.*?)(\])(.*)/

我在 while 循环中执行此操作，直到模式匹配为止。

正如我之前提到的，这是可行的，但最后一次迭代非常慢(如果没有匹配的话，则为第一次)。这是我正在使用的完整 JavaScript:

var str   = '...some content[vc_row param="test1"][vc_column]text content[/vc_column][/vc_row][vc_row param="xxx"]text content[/vc_row]...some more content';

var regex = /(.*)(\[\/?vc_column|\[\/?vc_row)( ?)(.*?)(\])(.*)/;
while (matches = str.match(regex)) {
    matches = str.match(regex);
    if (matches[2].slice(1, 2) !== '/')
        str = matches[1] + "<div class=\"" + matches[2].slice(1) + "\"" + " " + matches[4] + ">" + matches[6];
    else
        str = matches[1] + "</div>" + matches[6];
}

如何提高我的正则表达式“不匹配”性能？

Answer 1

您可以将其分成 2 个正则表达式。 一种用于开始标签，一种用于结束标签。

然后链 2 全局 g 替换。

var str   = '...some content[vc_row param="test1"][vc_column]text with [brackets in text] content[/vc_column][/vc_row][vc_row param="xxx"]text content[/vc_row]...some more content';

const reg1 = /\[(vc_(?:column|row))(\s+[^\]]+)?\s*\]/g;
const reg2 = /\[\/(vc_(?:column|row))\s*\]/g;

var result = str.replace(reg1, "<div class=\"$1\"$2>").replace(reg2, "</div>");

console.log(result);

请注意，原始正则表达式中的那些 (.*) 不需要这样。

使用无名函数，然后可以通过 1 个正则表达式替换来完成。

var str   = '...some content[vc_row param="test1"][vc_column]text with [brackets in text] content[/vc_column][/vc_row][vc_row param="xxx"]text content[/vc_row]...some more content';

const reg = /\[(\/)?(vc_(?:column|row))(\s+[^\]]+)?\s*\]/g;

var result = str.replace(reg, function(m,c1,c2,c3){
              if(c1) return "</div>";
              else return "<div class=\""+ c2 +"\""+ (c3?c3:"") +">";
             });

console.log(result);