2

I want to change one letter in the src of the image tag using js or jQuery.

<img src="/media/image_i/ball.png">
<img src="/media/image_i/bat.png">

I want to change that letter i in the src to a number. Eg.it should look like this -

<img src="/media/image_4/ball.png">
<img src="/media/image_4/bat.png">

EDIT- When i used the solutions everything was working, but it was changing the "src" of all image tags to same as first image, so the second image which is "bat.png" is getting changed to "ball.png", so same image is displaying two times. Thank you!

john
  • 41
  • 6
  • 2
    Seems pretty trivial, what have you tried that didn't work? [Image src Property](https://www.w3schools.com/jsref/prop_img_src.asp) – Luka Čelebić Apr 07 '18 at 13:05
  • Please try to solve this yourself. If you run into problems, post a question with specific problem description, and we'll be glad to help – Patrick Hund Apr 07 '18 at 13:08

3 Answers3

2

You can simply get the src attribute of the images, loop it over and replace the _i with _4 using JQuery. To check the below snippet works, you need to use inspect element of the browser and check the src attribute.

$(document).ready(function(){
  $('img').each(function(){
    var src = $(this).attr('src');;
    $(this).attr('src', src.replace('_i','_4'));
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="/media/image_4/ball.png">
<img src="/media/image_4/bat.png">
Ankit Agarwal
  • 30,378
  • 5
  • 37
  • 62
  • Hi, please seee the question now, i am getting a new issue. Thanks – john Apr 10 '18 at 18:11
  • @john since you have multiple images you need to loop over to the `images` and change the `src` attribute of each image. Check the updated answer and please tick mark it if it was helpful. – Ankit Agarwal Apr 11 '18 at 06:40
  • thankyou so much Ankit Agrawal this snippet was all i needed!! – john Apr 11 '18 at 10:09
1

You can do this job using regex.

$(document).ready(function(){
  var src = $('img').attr('src');
  var newsrc = src.replace(/_./g, '_4');
  $('img').attr('src', newsrc);
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="/media/image_i/ball.png">

You can develop it further. For more : https://stackoverflow.com/a/2912904/5792209

Özgür Can Karagöz
  • 1,039
  • 1
  • 13
  • 32
0

First, you'll need to identify the particular img element you need to modify. This can be done in a variety of ways, like giving the img in question an id or a class that is unique. If the image is the only one using the src you've specified in your question, you can use that (and that's what I'm doing in the code that follows).

After getting the proper reference to the element, use the .attr() method to get/set the current src value and the standard String.replace method to swap the values:

var current = $("img[src='/media/image_i/ball.png']");
current.attr("src", current.attr("src").replace("_i", "_4"));

If this is all you need to do, JQuery is overkill. Standard JavaScript is just as simple:

var el= document.querySelector("img[src='/media/image_i/ball.png']");
el.src = el.src.replace("_i", "_4");
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
  • Who down voted? – Ankit Agarwal Apr 07 '18 at 13:10
  • Someone is grumpy this morning. This is the right answer and also provides the JS alternative. – Scott Marcus Apr 07 '18 at 13:12
  • @DTavaszi Use your edit privilege wisely. Never edit a question or answer for the reasons you did here. My wording, grammar and formatting were intentional and I have reverted the edit. Edits are for correcting mistakes or to clarify. Your edit does not do that. – Scott Marcus Apr 07 '18 at 18:07
  • 1
    @ScottMarcus Thanks for the feedback, Marcus. My edit comment explains my changes. Keep in mind that, as the author of the post, what you write is not obvious to others who stumble on this answer. Reducing redundant words helps readers understand the answer. For example, the wording of "you'll need to" is redundant, and so is "the particular", because coders will not be here to modify an image they do not need to - or a non-"particular" one. Therefore, my edit privilege was used wisely to clarify small parts of your otherwise well-written answer. – DTavaszi Apr 08 '18 at 01:05
  • @DTavaszi Frankly, your explanation above makes no sense. *You'll need to...* can hardly be redundant as it is literally the first thing in the post and is there to convey that the following instruction is a requirement, not a suggestion. And *the particular* is not only not redundant, it is essential information to clarify that this `img` needs to be separated from all `img` elements. Edits are not for changing the meaning of an answer to better suit your particular tastes. If you have concerns with issues like the ones you've mentioned, a comment to the answer is warranted, not an edit. – Scott Marcus Apr 08 '18 at 04:05
  • @DTavaszi Please read the [Stack Overflow guidelines on Edits](https://stackoverflow.com/help/privileges/edit) and take note of: *"to clarify the meaning of a post **without changing it"***. My words were chosen carefully to convey particular meanings (explained above). Your edit removed those words and thus my intended meaning. – Scott Marcus Apr 08 '18 at 04:08
  • 1
    @ScottMarcus The wording in your original post does not reflect the information you wrote to me now. Again, it makes sense to you, because you wrote it. But to convey this information you need to be explicit. My edit did not change the meaning of your post. If you do not understand that, that's fine. Stack Overflow is a community platform, hence why my edit was approved. – DTavaszi Apr 08 '18 at 05:46
  • @DTavaszi I understand how to convey information (I've been doing it professionally for over 25 years). Your edit removed key points I intentionally made. Instead of arguing the point, understand that your thoughts about my post would have been best reflected in a comment, not an edit. You're right, SO is a community, so have some respect for others and follow the guidelines as laid out by the community. Your use of the Edit privilege here was misguided. – Scott Marcus Apr 08 '18 at 13:51
  • @ScottMarcus please help! i have edited the question because of a new issue i am getting. Thanks in advance – john Apr 10 '18 at 18:09
  • @john The first sentence of my answer already addresses your issue. You must identify the image that needs changing uniquely. Additionally, my answer indicates that you should use `.querySelector()`, which will only reference one element. Using that prevents multiple elements from being affected. – Scott Marcus Apr 10 '18 at 19:25
  • yes, that works, but i want to change the src of all the images and without specifying the image name. Is there something like a for loop which can iterate through all the "img" tags and replace "_i" with "_4", without our need of specifying the image name. – john Apr 10 '18 at 19:52
  • @john I'm confused as to what you want. Your question edit indicates that you don't want all the image `src`s changed, but your last comment indicates that you do. Can you please clarify what you are looking for? – Scott Marcus Apr 10 '18 at 21:15