Replace all images from an html string using jquery [duplicate]

Question

I have an html string from which I want to replace all my img tags with figure tag. Here is my code

$('img',$(html)).replaceWith(function(){
    var figure = '<figure><img src="'+$(this).src+'"><figcaption>'+$(this).attr('alt')+'</figcaption></figure>';
    return $(figure);
});

This code does not work. I would also like to return the resulting html string after the operation has been performed but it seems that replace only returns the element that has been replaced . So how do I do that?

@ArunPJohny Whatever gets the job done. Basically I just want to fnd all the images in the element and repace/wrap them with a figure element and the return the html string — Akshat Jiwan Sharma
– Akshat Jiwan Sharma, Commented May 31, 2013 at 14:59
@NimChimpsky not a duplicate. The problem that I have here is that the html string is dynamically generated. I want the string operated upon and then returned. And the code that I am using is not working. — Akshat Jiwan Sharma
– Akshat Jiwan Sharma, Commented May 31, 2013 at 15:05
@AkshatJiwanSharma sorry, didn't saw you were providing the behaviour of 'not working' — A. Wolff
– A. Wolff, Commented May 31, 2013 at 15:09
@AkshatJiwanSharma you should convert the HTML to a DOM structure, then use DOM manipulation (hence the dupe), then (optionally) serialize back. Not technically a duplicate, but close enough. — John Dvorak
– John Dvorak, Commented Jun 1, 2013 at 5:50

Blazemonger · Accepted Answer · 2013-05-31 15:12:07Z

6

$(this).src isn't valid code. You need $(this).attr('src') or just this.src in this case.

However, the real problem is probably that you're expecting html to be changed in-place -- except you're not using replaceWith on html, but on $(html). In other words, your HTML string isn't being altered; your temporary jQuery object is, which then vanishes.

Try something like this:

var html = /* whatever you want */;
var $html = $(html); // jQuery object

$('img', $html).replaceWith(function () {
    return '<figure><img src="' + $(this).attr('src') + '"><figcaption>' + $(this).attr('alt') + '</figcaption></figure>';
});

html = $html.html(); // update html string, if necessary

http://jsfiddle.net/mblase75/77aXS/

edited May 31, 2013 at 15:12

answered May 31, 2013 at 14:58

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Akshat Jiwan Sharma Over a year ago

Thank you! @Blazemonger. Will accept in 2 minutes

Akshat Jiwan Sharma Over a year ago

I have just one question. Form my scenario Will wrap be better as one comment pointed out?

Blazemonger Over a year ago

wrap will add the <figure> but you'll still need to create the <figcaption> and remove the alt attribute yourself. In the end, this code is probably simpler.

Collectives™ on Stack Overflow

Replace all images from an html string using jquery [duplicate]

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related