1

I have this html

<div id="items-content">
<p><img class="fr-dib" src="http://i.imgur.com/bEDR9dc.png" data-imgslap="{{image-key}}" style="width: 214px;"></p>
</div>

And i want to replace src="http://i.imgur.com/bEDR9dc.png" with src="http://i.imgur.com/mJyABlG.jpg"

I have the following jquery

$(document).ready(function() {
  $('#items-content').html( 'src="http://i.imgur.com/bEDR9dc.png"' ) {
    return 'src="http://i.imgur.com/mJyABlG.jpg"';

    }
} );

I'm learning JQuery still and I don't know where I have gone wrong. Would appreciate the help.

Update

I plan on using the same method of replacing the image to replace something like data-imgslap= with src=. Basically how do I replace html text 'x' with 'y' (They will only ever be html attributes text being replaced).

Rob
  • 1,835
  • 2
  • 25
  • 53
  • I haven't used much jQuery, but it looks like you're replacing the *complete contents* of your `
    ` with just `src=...`, leading to something like `
    src=...
    `. I'd recommend you use the debugging features of your browser so see the resulting HTML, that usually helps me to see what's happening. You probably want to use jQuery's `.attr()` function to alter the `src` value.
     – FriendFX Jan 24 '16 at 07:00

2 Answers2

0

Update a DOM img tag's src

You're looking for jQuery's attr() method to update a single attribute's value:

$(document).ready(function() {
  $('#items-content .fr-dib').attr('src', 'http://i.imgur.com/mJyABlG.jpg"');
} );

jsfiddle: https://jsfiddle.net/patrickberkeley/0wefe37t/

Update a DOM img src with a value from a data attr

To update one attribute with another attribute's value (in this example updating an image's src with a data attribute's value):

$(document).ready(function() {
  var $img = $('#items-content [data-imgslap]');
  var newSrc = $img.data('imgslap');
  
  $img.attr('src', 'http://i.imgur.com/' + newSrc + '.jpg"');
} );

jsfiddle: https://jsfiddle.net/patrickberkeley/bx686410/2/

Regex to replace img src in a string

Based on the comments you've left though, it seems like your goal is to a value in a string (rather than updating an img element's src in the DOM).

In order to do that:

var str = '<div id="items-content"><p><img class="fr-dib" src="http://i.imgur.com/bEDR9dc.png" data-imgslap="mJyABlG" style="width: 214px;"></p></div>';
var newSrc = 'http://i.imgur.com/mJyABlG.png';
var newStr = str.replace(/<img(.*)src=[\"|\'](.*?)[\"|\'](.*)/, "<img$1src='" + newSrc + "'$3");

jsfiddle: https://jsfiddle.net/patrickberkeley/qrdt1esz/1/

Notice you *do not $(document).ready() because you're not selecting something from the dom. The above regex should handle: single and double quotes and any combination of attrs on either side of the img's src.

Community
  • 1
  • 1
Patrick Berkeley
  • 2,206
  • 21
  • 26
  • This looks like it will replace all images to the one image. I just want that particular image to be changed so an attr with a certain value. – Rob Jan 24 '16 at 08:18
  • How would i change an attribute with a certain value to a different attr and value? – Rob Jan 24 '16 at 08:29
0

Use attr() to solve this problem

$(document).ready(function() { $('#items-content .fr-dib').attr('src', 'http://i.imgur.com/mJyABlG.jpg"'); } );

Or use regular expression

your_string.replace(/(<img\s class\=\"fr-dib\"\ssrc=")(.*?)("\s?\/>)/, "$1http://i.imgur.com/mJyABlG.jpg $3");
Jobelle
  • 2,717
  • 1
  • 15
  • 26
  • How would i change an attribute with a certain value to a different attr and value? e.g. src `'src', 'http://i.imgur.com/mJyABlG.jpg'` to `'class', 'classname'` I think the string replace might be what im looking for, the html comes form the db so i might be able to change those strings as it comes from the db – Rob Jan 24 '16 at 09:16
  • Use reg exp to change the content – Jobelle Jan 24 '16 at 09:22