Использовать регулярное выражение для изменения img src

Question

Я хочу изменить источник изображения в соответствии с кнопкой, которую я нажимаю. Я предполагаю, что мне нужно использовать регулярное выражение, но я не уверен, как именно он должен выглядеть.

<img id="logo_layer2" src="images/logo/logo_compass_a_layer2_red.png"> 
<ul id="letters"> 
    <li>A</li> 
    <li>B</li> 
    <li>C</li> 
... 
</ul> 

"a_layer2" часть должна измениться на "b_layer2", "e_layer2" и так далее.

events: { 
    "click #letters li" : "change_letter" 
}, 

change_letter: function(e) { 
    var letter = $(e.target).text();  
    var newimg = /images\/logo\/logo_\w*_\w{1}_layer\d_\w*.png/.replace((/\w{1}/,letter)); 
    $("#logo_layer2").attr("src",newimg); 
}, 

http://jsfiddle.net/uLqBY/

Answer 1

Попробуйте

fiddle Demo

$('#letters li').click(function(){ 
    var txt =$(this).text().toLowerCase(); 
    $('#logo_layer2').attr('src',function(_,old_src){ 
     return old_src.replace(/_\w_/g,'_'+txt+'_'); 
    }); 
}); 

---

fiddle Demo

$('#letters li').click(function(){ 
    var txt =$(this).text().toLowerCase(); 
    $('#logo_layer2').prop('src',function(_,old_src){ 
     return old_src.replace(/_\w_/g,'_'+txt+'_'); 
    }); 
}); 

.prop()

Read .prop() vs .attr()

Answer 2

Чтобы улучшить регулярное выражение, вы можете использовать положительный назад 'и lookaheads следующим образом:

(?<=images\/logo\/logo_\w*_)\w{1}(?=_layer\d_\w*.png) 

Это будет соответствовать просто письмо, которое вы собираетесь изменение, в этом случае это 'a' в src.

Что касается jquery/js, я не знаю.