使用正則表達式來更改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()

讀.prop() vs .attr()

Answer 2

爲了改善正則表達式，你可以利用積極的回顧後，並向前看符號如下：

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

這隻會匹配您要信在這種情況下，它是src中的'a'。

至於jquery/js，我不知道。