Use regex to change img src

Question

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/

score 1 · Accepted Answer · edited May 23 '17 at 11:49

1

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

edited May 23 '17 at 11:49

Community

1
1

answered Nov 23 '13 at 09:46

Tushar Gupta - curioustushar

58,085
24
103
107

Thanks! It works, but it's just not getting $(this).text() value. – Arman Ospanov Nov 23 '13 at 09:54
As the new src it returns "images/logo/logo_compass__layer2_red.png" – Arman Ospanov Nov 23 '13 at 09:58
Yes, I just wonder when I click on "B", why it returns "images/logo/logo_compass__layer2_red.png", when your code should change it to "images/logo/logo_compass_b_layer2_red.png". – Arman Ospanov Nov 23 '13 at 10:00
Failed to load resource: the server responded with a status of 404 (Not Found) http://127.0.0.1/images/logo/logo_compass__layer2_red.png – Arman Ospanov Nov 23 '13 at 10:03
I changed it to var txt = $(e.target).text().toLowerCase(); Now it works. – Arman Ospanov Nov 23 '13 at 10:07

score 0 · Answer 2 · answered Nov 23 '13 at 09:56

To improve on the regex, you can utilise positive lookbehind and lookaheads as follows:

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

This will match simply the letter that you intend to change, in this case it is the 'a' in the src.

As for the jquery/js, I don't know.

Use regex to change img src

2 Answers2