How to replace image URL(plain text) with Regex

Question

The javascript code will be change image URL(plain text), for example :

http://www.sstatic.net/stackoverflow/img/apple-touch-icon.png

to be show like this :

enter image description here

and this is the code I wanted to use :

var isImgUrl= /(https?:\/\/.*\.(?:png|jpg|gif))/i;
var txt=document.getElementById('comment');
txt.innerHTML=txt.innerHTML.replace(isImgUrl,'<img src=" [how to insert the image URL here from regex?] "/>');

please help me to fix the codes above

by the way, what the regex(on var isImgUrl) is already correct?

You call the image url by asking it to answer the phone in six to eight weeks. — Cole Tobin
– Cole Tobin, Commented Jul 28, 2013 at 17:49
@YotamOmer the OP seems to want to be able to place image URLs in his document and then using Regex, find them and turn them into images. — Cole Tobin
– Cole Tobin, Commented Jul 28, 2013 at 17:50
I have tried BMP and the image Appears. <img> tag can show the five image type, isn't it? — Herry Kusmadi
– Herry Kusmadi, Commented Jul 28, 2013 at 18:33

Ethan Brown · Accepted Answer · 2013-07-28 18:18:52Z

5

You're almost there, Herry. When you're doing replacements, there are some metacharacters available for you in the replacement string. $1 will insert the first matched group, $2 will insert the second matched group, and so on. However, in your case, you can use the even more general $&, which will insert the entire matched regex, so you can even drop the unnecessary group in your regex:

var isImgUrl= /https?:\/\/.*\.(?:png|jpg|gif)/i;
var txt=document.getElementById('comment');
txt.innerHTML=txt.innerHTML.replace(isImgUrl,'<img src="$&"/>');

I'm guessing here, but you probably also want to include the common JPEG extension .jpeg (as well as the shorter .jpg).

I also you suspect you want to replace all such matches; what you have will only replace the first. To replace all matches, specify the g modifier to the regex as well. So taking all this in mind, your regex becomes:

var isImgUrl= /https?:\/\/.*\.(?:png|jpg|jpeg|gif)/ig;

Except wait! There's more. If you do multiple replacements this way, you'll run into trouble because of the greedy nature of repetition operators. So try the above regex on this string:

"One picture: http://foo.com/a.jpg, two pictures: http://foo.com/b.jpg."

What you are expecting to get back is this:

"One picture: <img src="http://foo.com/a.jpg"/>, two pictures: <img src="http://foo.com/b.jpg">."

But what you'll actually get is this:

"One picture: <img src="http://foo.com/a.jpg, two pictures: http://foo.com.b.jpg">."

Whoops! What happened? Well, the .* is greedy; that is, it will match as much as it possibly can. So it did, and it scooped up both images.

All you have to do is change it to lazy by adding a question mark after the repetition operator:

var isImgUrl= /https?:\/\/.*?\.(?:png|jpg|jpeg|gif)/ig;

Now it should work as expected! You can see it in action here:

http://jsfiddle.net/tMA6e/

edited Jul 28, 2013 at 18:18

answered Jul 28, 2013 at 17:55

Ethan Brown

27.4k5 gold badges84 silver badges95 bronze badges

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

2 Comments

Ethan Brown Over a year ago

Hi, Herry. I verified my solution, and it works fine, so you must be doing something else wrong.... I posted a jsfiddle with my solution (it's at the end). Take a look at that and see if you can spot what's not working for you.

Ethan Brown Over a year ago

Whoah, you're definitely not gonna get what you want with $&<img src="$&"/>$&! Every time you use $&, it's going to insert the entire thing you mtached....

Collectives™ on Stack Overflow

How to replace image URL(plain text) with Regex

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related