Javascript 正则表达式替换产生意外结果

Question

我有这个奇怪的问题，希望有人能解释一下这是怎么回事。

我的目的是捕获文本部分(a-z、连字符、下划线)并将 id 和 v 的数值附加到其中，下划线分隔。

我的代码:

var str_1 = 'foo1_2';
var str_2 = 'foo-bar1_2';
var str_3 = 'foo_baz1_2';
var id = 3;
var v = 2;
str_1 = str_1.replace(/([a-z_-]+)\d+/,'$1' + id + '_' + v);
str_2 = str_2.replace(/([a-z_-]+)\d+/,'$1' + id + '_' + v);
str_3 = str_3.replace(/([a-z_-]+)\d+/,'$1' + id + '_' + v);

$('#test').html(str_1 + '<br>' + str_2 + '<br>' + str_3 + '<br>');

预期结果:

foo3_2
foo-bar3_2
foo_baz3_2 

实际结果:

foo3_2_2
foo-bar3_2_2
foo_baz3_2_2

有什么想法吗？

JS Fiddle example

Answer 1

你的模式:

/([a-z_-]+)\d+/

只匹配“foo1_2”中的“foo1”，“foo”将是捕获组的值。 .replace() 函数替换源字符串中实际匹配的部分，保留其余部分。因此“foo1”被“foo3_2”取代，但原来的尾随“_2”仍然存在。

如果您想更改整个字符串，那么您的正则表达式必须考虑源字符串中的所有内容。