Change All Tag Src Attributes In Html Document?

January 29, 2023 Post a Comment

Given any html document with any number of tags, and using javascript, how can I change all the src attributes of the tags? For example change all src attri

Solution 1:

You can use document.querySelectorAll() with selector "img[src]" or "[src]"; String.prototype.indexOf(); String.prototype.slice().

If you are trying to select only <img> elements which have a src attribute set, you can substitute selector "img[src]" for "[src]"; where "[src]" selects all elements in document where src attribute is present at element html.

for (el of document.querySelectorAll("img[src]")) {
  el.src = el.src.slice(0, el.src.indexOf("?") > -1 
             ? el.src.indexOf("?") : el.src.length
           ) + "?foo=bar";
}

Solution 2:

This is a one-liner in jQuery:

$("img").prop("src", function(i, oldVal) { return oldVal + "?foo=bar"; });

Wrap it in a document ready handler or include in a script at the end of the body.

Note that the OP confirmed in a comment that the requirement is just to append a specific query string to all img element src attributes, and that there is no need to test whether the existing src URL already includes a query string. But if it was possible that a URL might already have a query string then a minor change to the above can handle it by testing for a "?":

$("img").prop("src", function(i, oldVal) {
  return oldVal + (oldVal.indexOf("?") === -1 ? "?" : "&") + "foo=bar";
});

// confirm the changes:
console.log($("img").map(function() { return this.src; }).get().join("\n"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img src="http://test.com/whatever.jpg">
<img src="http://test.com/something.jpg">
<img src="http://blah.com/whatever.jpg?a=b&c=d">

Solution 3:

Using jquery:

$("*[src]").attr("src", "http://example.com/somerandomimage.jpg?foo=bar");

In case you intend to replace certain urls only, constrain the selector:

$("*[src='http://example.com/somerandomimage.jpg']").attr("src", "http://example.com/somerandomimage.jpg?foo=bar");

The same operation when having a html string in the first place:

$("*[src='http://example.com/somerandomimage.jpg']", $(<html snippet>)).attr("src", "http://example.com/somerandomimage.jpg?foo=bar");

The <html snippet> should be well-formed and rooted in a single element.

Force a single root as follows:

$("*[src='http://example.com/somerandomimage.jpg']", $(<html snippet>).wrapAll("<div/>").first().parent()).attr("src", "http://example.com/somerandomimage.jpg?foo=bar");

Note the traversal to the generated root as wrapAll returns the original jquery object.

Solution 4:

var imgs = document.querySelectorAll("img");
imgs.forEach(function(img) {
   var oldVal = img.getAttribute('src');
   img.setAttribute('src', oldVal + newVal);
});

Solution 5:

Here's how you can change the src for all the images at once with jQuery:

$(document).ready(function() {
  $('img').each(function() {
    var src = $(this).attr('src');
    $(this).attr('src', src + '?foo=bar');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<img src="http://example.com/somerandomimage.jpg">
<img src="http://example.com/somerandomimagetwo.jpg">

JavaScript College