Use regex to change img src

debugcn Published at Dev

Arman Ospanov

I want to change image source according to a letter button that I click on. I guess that I need to use regular expression, but I am not sure how exactly it should look like.

<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" part should change to "b_layer2", "e_layer2" and so on.

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/

Tushar Gupta - curioustushar

Try

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()

Collected from the Internet

Please contact [email protected] to delete if infringement.