I'm working on a site where the content has been important from an old site with a different domain. About half of the images have relative paths which work well. The other half have absolute paths hard coded in with the old domain. The old site has been taken down, so those images no longer work. These images did get imported however, and exist on the new server. Changing those paths to relative URL's corrects the issue.

The long term solution would be to work through and each and every page to remove the old domain from these image src URLs.

But as a short term solution, I'd like to apply a javascript or jquery workaround that will loop through each img on the page, check the url of each image, and if it contains the old domain, remove it. So far, I've not had much success.

Here's my sample HTML:

<p><img src="somepicture.jpg"></p> <!-- this works -->
<p><img src=".jpg"></p> <!-- this doesn't -->

Here's the javascript/jquery that I've written up:

$("img").each(function() {
    if ($(this).attr("src").indexOf("oldwebsitedomain") > -1) {
        $(this).attr("src").replace("/","");
        }
});

If I console.log "this", I am getting all of the img objects on the page properly. And if I console log "$(this).attr("src")" I get the URL of each image. I can verify that my if statement evaluates to true on the correct image URLs, but the trouble es inside the if statement. The replace doesn't seem to run, and the addresses for the images aren't modified.

What am I missing?

I'm working on a site where the content has been important from an old site with a different domain. About half of the images have relative paths which work well. The other half have absolute paths hard coded in with the old domain. The old site has been taken down, so those images no longer work. These images did get imported however, and exist on the new server. Changing those paths to relative URL's corrects the issue.

The long term solution would be to work through and each and every page to remove the old domain from these image src URLs.

But as a short term solution, I'd like to apply a javascript or jquery workaround that will loop through each img on the page, check the url of each image, and if it contains the old domain, remove it. So far, I've not had much success.

Here's my sample HTML:

<p><img src="somepicture.jpg"></p> <!-- this works -->
<p><img src="https://www.oldwebsitedomain./someotherpicture.jpg"></p> <!-- this doesn't -->

Here's the javascript/jquery that I've written up:

$("img").each(function() {
    if ($(this).attr("src").indexOf("oldwebsitedomain.") > -1) {
        $(this).attr("src").replace("https://www.oldwebsitedomain./","");
        }
});

If I console.log "this", I am getting all of the img objects on the page properly. And if I console log "$(this).attr("src")" I get the URL of each image. I can verify that my if statement evaluates to true on the correct image URLs, but the trouble es inside the if statement. The replace doesn't seem to run, and the addresses for the images aren't modified.

What am I missing?

• javascript
• jquery
• image
• src

4 Answers 4

In order to change an attribute with jquery, you have to pass a second argument to the function call:

$(this).attr("src", "new src value");

How to set and get an attribute.

To set the value of any attribute jquery uses the following syntax, $(this).attr("src", 'new value');. To get value attribute = $(this).attr("src") this is used. I bined these two in a sigle line.

$("img").each(function() {
    if ($(this).attr("src").indexOf("oldwebsitedomain.") > -1) {
        $(this).attr("src", $(this).attr("src").replace("https://www.oldwebsitedomain./",""));
    }
});

.attr('src') only returns the string in the specific attribute. That string is disassociated from the DOM element it came from, so any operations performed on it will NOT go back into the DOM element. You'd need

str = $(this).attr('src');
$(this).attr('src', str.replace(....));

to write the changed string back.

You need to reset image source attribute.

var newsrc = $(this).attr("src").replace("https://www.oldwebsitedomain./","");
$(this).attr("src", newsrc);

.attr( attributeName, function ) can also be used to reset the image source. Using the example you don't need to use .each()

$("img").attr('src', function(_, value) {
    return value.indexOf("oldwebsitedomain.") > -1 ?
        value.replace("https://www.oldwebsitedomain./","") :
        value;
});