Transform string into image with jQuery

Question

Another jQuery question for you guys.

Say I have a url of an image in my web page surrounded by square brackets.

[http://www.example.com/picture.jpg]

How could I, with jQuery transform that string like so...

[http://www.example.com/picture.jpg]

into...

<img src="http://www.example.com/picture.jpg" />

?

That depends on what you call an image. How do you know whether example.com/foo.php is an image? Do you care? Can you be certain everything in square brackets is an image path? — Dominic Rodger
– Dominic Rodger, Commented Oct 22, 2009 at 8:44
also, what do you start out with? the specific strings with the square brackets or do you want to convert any text on the page surrounded by square brackets into images? — cobbal
– cobbal, Commented Oct 22, 2009 at 8:45
@Dominic This is a very niche project and there won't be any other urls inside these brackets. @cobbal Basically, grab the url inside the brackets and append into the src of the img attribute. — Keith
– Keith, Commented Oct 22, 2009 at 8:51
@Natrium, not the point, but yes I could, as mentioned this is a very niche project. — Keith
– Keith, Commented Oct 22, 2009 at 8:53

Victor · Accepted Answer · 2009-10-22 13:59:40Z

1

I'd do something like this

$("some-selector").each(function(){
    $(this).html($(this).html().replace(/\[(http:.*?)\]/gi, function(str, p1){
        return "<img src='"+p1+"' />";
    }));
});

"some-selector" should try to pinpoint where these string occur. If there is nothing like it... just put "body" and see what happens :)

edited Oct 22, 2009 at 13:59

answered Oct 22, 2009 at 9:40

Victor

9,2793 gold badges29 silver badges40 bronze badges

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

4 Comments

Keith Over a year ago

Thank you but no joy I'm afriad

Victor Over a year ago

There was a mistake in it... I have to use $(this). Maybe it works now :)

Keith Over a year ago

So so close, thank you! - I get: <img src="[example.co.uk/wp-content/uploads/2009/10/virgin_media.jpg"> - Just need to get rid of the left bracket?

Rakesh Juyal Over a year ago

Ah! This guy know Regex X( stackoverflow.com/questions/1077541/…

Collectives™ on Stack Overflow

Transform string into image with jQuery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related