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

要改进正则表达式，您可以使用正面的lookbehind和lookaheads，如下所示：

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

这只会匹配您想要更改的字母，在这种情况下，它是src中的'a'。

至于jquery / js，我不知道。

使用正则表达式更改img src

2 个答案: