Das Ersetzen von Javascript-Regex führt zu einem unerwarteten Ergebnis

Ich habe dieses seltsame Problem, hoffe, dass jemand erklärt, was los ist.

Meine Absicht ist es, den Textteil (az, Bindestrich, Unterstrich) zu erfassen und die numerischen Werte von idund van ihn getrennt anzuhängen .

Mein Code:

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

Erwartetes Ergebnis:

foo3_2
foo-bar3_2
foo_baz3_2 

Tatsächliche Ergebnis:

foo3_2_2
foo-bar3_2_2
foo_baz3_2_2

Irgendwelche Ideen?

JS Fiddle Beispiel