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: .png I need it to look like this: .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

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./images/Something_cool-100x75.png I need it to look like this: http://example./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

• javascript
• jquery

Share Follow asked Feb 11, 2014 at 22:01 DerekDerek 5,04788 gold badges4949 silver badges8282 bronze badges 1

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

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

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

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

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/8mYYZ/

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 es as

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

Try this

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

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.