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/

Community · Accepted Answer · 2017-05-23 11:49:28Z

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, 2017 at 11:49

CommunityBot

11 silver badge

answered Nov 23, 2013 at 9:46

Tushar Gupta - curioustushar

57.2k24 gold badges106 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Arman Ospanov Over a year ago

Thanks! It works, but it's just not getting $(this).text() value.

Arman Ospanov Over a year ago

As the new src it returns "images/logo/logo_compass__layer2_red.png"

Arman Ospanov Over a year ago

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 Over a year ago

Failed to load resource: the server responded with a status of 404 (Not Found) 127.0.0.1/images/logo/logo_compass__layer2_red.png

Arman Ospanov Over a year ago

I changed it to var txt = $(e.target).text().toLowerCase(); Now it works.

Vasili Syrakis · Accepted Answer · 2013-11-23 09:56:05Z

0

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.

answered Nov 23, 2013 at 9:56

Vasili Syrakis

9,6912 gold badges42 silver badges59 bronze badges

Collectives™ on Stack Overflow

Use regex to change img src

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related