没有匹配项时正则表达式性能不佳

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);

Answer 2

换一个怎么样...喜欢

str.replace(/\[(\/?)(vc_column|vc_row)([^\]]*?)\]/g, function(a,b,c,d) {
    return '<' + b + 'div' + (b==='/' ? '' : ' class="' + c + '"') + d + '>';
    });

这匹配一个标签（开始或结束）和所有属性，包括括号，捕获除括号之外的所有内容。然后以正确的格式重新组合在一起（divs 和 classes）。

全局标志 (/../g) 消除了对任何循环的需要。

var sInput = '...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';

console.log(sInput.replace(/\[(\/?)(vc_column|vc_row)([^\]]*?)\]/g, function(a,b,c,d) {
    return '<' + b + 'div' + (b==='/' ? '' : ' class="' + c + '"') + d + '>';
    })
    );