Change all tag src attributes in html document?

Question

Given any html document with any number of <img> tags, and using javascript, how can I change all the src attributes of the <img> tags?

For example change all src attributes in <img> tags from "http://example.com/somerandomimage.jpg" to "http://example.com/somerandomimage.jpg?foo=bar"

EDIT jquery and other javascript libraries are ok. No need to be vanilla javascript.

Probably front-end, since he added the dom-manipulation tag. — Feathercrown, Oct 12 '16 at 00:44
front end. come one...it doesn't matter. It's javascript manipulation of a dom right? — richard, Oct 12 '16 at 00:44
It actually matters a lot. Backend deals with strings and regexes and stuff to manipulate page content, front end just accesses it directly. — Feathercrown, Oct 12 '16 at 00:45
@Feathercrown ok makes sense...I think either way works for me...either manipulating a dom, or doing it with string manipulation. — richard, Oct 12 '16 at 00:46
Would be nice for some constructive criticism instead of a lot of downvoting and close votes. It's a legit, useful question. — richard, Oct 12 '16 at 00:47
@Feathercrown Right...I didn't think it would be a big deal. I just figured it would be a simple answer that I would get a good answer to, but apparently it's a very hot topic that must be asked exactly correctly. — richard, Oct 12 '16 at 00:48
@richard Yeah, members of SO seem to hate these simple questions, even if the asker says they tried Googling it. — Feathercrown, Oct 12 '16 at 00:50
Is the question "How do I append `?foo=bar` to all img element `src` attributes?", or do you need the code to be a bit smarter and allow for some URLs possibly already having a query string, or...? Regarding the downvotes, I would guess they are because the question doesn't show any effort to solve the problem. — nnnnnn, Oct 12 '16 at 00:54
@nnnnnn Yes first assumption is correct. It shouldn't assume the string already includes it. — richard, Oct 12 '16 at 00:56

guest271314 · Answer 1 · 2016-10-12T01:21:00.830

3

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";
}

edited Oct 12 '16 at 01:21

answered Oct 12 '16 at 00:47

guest271314

1
15
104
177

Shouldn't it be `"img[src]"`? Otherwise it'll try to change script and iframe elements too. – nnnnnn Oct 12 '16 at 01:09
@nnnnnn Yes, selector `"img[src]"` can be substituted for `"[src]"`. Read this portion of OP _"how can I change all the src attributes of the tags?"_ , _"For example change all src attributes in tags"_. See updated post – guest271314 Oct 12 '16 at 01:15
I was referring to the question title. – nnnnnn Oct 12 '16 at 01:21
@nnnnnn Updated Answer just the same to avoid confusion – guest271314 Oct 12 '16 at 01:23

collapsar · Answer 2 · 2016-10-12T01:31:09.430

2

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.

edited Oct 12 '16 at 01:31

answered Oct 12 '16 at 00:47

collapsar

17,010
4
35
61

That's jquery correct? And assuming I have a string and need to do this, I can just use jQuery.parseHTML(mystring) to get the document, and then how do I use your answer? – richard Oct 12 '16 at 00:50
@richard: you load jquery using a `script` tag with one of the cdn urls, possibly qualified by the version you need. See the jquery site for information which urls are supported. The code would go in a proper event handler. If you do have a string, you may parse it into an element and use that element as a context for the code in the answer. – collapsar Oct 12 '16 at 00:58
@richard: see the edits to my answer. – collapsar Oct 12 '16 at 01:14

nnnnnn · Answer 3 · 2016-10-12T01:04:43.827

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

score 1 · Answer 4 · answered Oct 12 '16 at 00:49

1

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

answered Oct 12 '16 at 00:49

user3115197

121
6

score 1 · Answer 5 · answered Oct 12 '16 at 00:50

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

Change all tag src attributes in html document?

5 Answers5

Linked