Replace string in url with JQuery

Question

I know this is a really basic question and forgive me for even asking but I cannot seem to get it right for the life of me.

I am using JQuery to get the url from one image src and load it into another image src which I have working fine. However I need to replace the 100x75 part of the url with something like 800x600 so it pulls the larger image.

How would I do that?

Here is an example: Say Im grabbing the image source url with jquery and it looks like this: http://example.com/images/Something_cool-100x75.png I need it to look like this: http://example.com/images/Something_cool-800x600.png

jQuery(document).ready(function($) {
    // this will pull the image I need
    var get_image = $('img.attachment-shop_thumbnail').attr('src');

    //this will assign the image I pulled above to where I need it to go but I need to replace the 100x75 in the filename to 800x600
    $("#sale_img").attr("src", get_image);
});

So if you provide an answer could you tell me how it works because I will also need to change .png to .jpg on some of them as well.. Just not sure how that

having that code and the jQuery tag is unfair, it could be narrowed down to simply how to turn stringX to stringY — ajax333221
– ajax333221, Commented Feb 11, 2014 at 22:10

Joe Cullinan · Accepted Answer · 2014-02-11 22:05:04Z

2

var old = "http://example.com/images/Something_cool-100x75.png";
var new = old.replace("100x75","800x600");
new = new.replace(".png",".jpg");
alert(new);

Alerts "http://example.com/images/Something_cool-800x600.jpg"

answered Feb 11, 2014 at 22:05

Joe Cullinan

5623 silver badges15 bronze badges

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

Comments

Karl-André Gagnon · Accepted Answer · 2014-02-11 22:10:08Z

2

You could use regexp :

string.replace(/\d+x\d+/, '800x800')

Basicly, it find a digit (\d) 1 or more time (+) followed by a "x" and the find an other digit one or more time.

It change it for the value you said.

as for the .jpg, you could still use regexp : string.replace(/\.png$/, '.jpg')

Fiddle : http://jsfiddle.net/8mYYZ/

answered Feb 11, 2014 at 22:10

Karl-André Gagnon

33.9k5 gold badges53 silver badges77 bronze badges

Comments

Sri Tirupathi Raju · Accepted Answer · 2014-02-11 22:05:32Z

1

simple javascript replace can do your job

var get_image = $('img.attachment-shop_thumbnail').attr('src');
get_image = get_image.replace("100x75","800x600");

in the same way use it for replacing .png to .jpg. so it comes as

var get_image = $('img.attachment-shop_thumbnail').attr('src').replace("100x75","800x600")..replace(".png",".jpg");

answered Feb 11, 2014 at 22:05

Sri Tirupathi Raju

8395 silver badges14 bronze badges

Comments

Daniil Grankin · Accepted Answer · 2014-02-11 22:05:33Z

1

Try this

var get_image = $('img.attachment-shop_thumbnail').attr('src').replace('100x75', '800x600');

answered Feb 11, 2014 at 22:05

Daniil Grankin

3,9532 gold badges32 silver badges40 bronze badges

Comments

steinmas · Accepted Answer · 2014-02-11 22:12:45Z

0

I think a better implementation would be to have a separate css class for each image (unless there are a lot of them). Instead of worrying about string manipulation of image sources, you can simply change the class.

answered Feb 11, 2014 at 22:12

steinmas

3983 silver badges9 bronze badges

Collectives™ on Stack Overflow

Replace string in url with JQuery

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related