Correct Img Src Path with Javascript and Jquery

Question

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.com/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.com") > -1) {
        $(this).attr("src").replace("https://www.oldwebsitedomain.com/","");
        }
});

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 comes inside the if statement. The replace doesn't seem to run, and the addresses for the images aren't modified.

What am I missing?

Answer 1

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 combined these two in a sigle line.

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

Answer 2

为了使用jquery更改属性，您必须将第二个参数传递给函数调用：

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

Answer 3

.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.

Answer 4

You need to reset image source attribute.

var newsrc = $(this).attr("src").replace("https://www.oldwebsitedomain.com/","");
$(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.com") > -1 ?
        value.replace("https://www.oldwebsitedomain.com/","") :
        value;
});