Regex - Replace URL with image tag

Question

I am using this regex to replace links in HTML:

$(...).replace(/(http:\/\/\S+(\.png|\.jpg|\.gif))/g, '<a href="$1"><img src="$1" /></a>');

As you can see, it will convert text URLs (that ends with .png, .jpg or .gif) to img-tags. However, I have some issues with this regex, see below:

It replaces links inside html tags, and breaks the markup
It does not work with https://, if the original url is https:// it should be that after the replacement too and not http://.

Can somebody come up with improvements to this?

Johan Karlsson · Accepted Answer · 2015-12-26 13:50:48Z

2

To fix your regex to also match https, add s? after http:

/(https?:\/\/\S+(\.png|\.jpg|\.gif))/g

To fix your problem with replacing links in html tags, you can do like this to select all textNodes:

$("body").find("*").addBack().contents().filter(function() {
  return this.nodeType == 3;
})

Here's an example:

$("body").find("*").addBack().contents().filter(function() {
  return this.nodeType == 3;
}).each(function(index, element) {
  $(element).replaceWith(element.textContent.replace(/(https?:\/\/\S+(\.png|\.jpg|\.gif))/g, '<a href="$1"><img src="$1" /></a>'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Some text<br>
<div>
  Should be picture: https://pic.jpg
</div>

Another picture here:
http://www.example.com/pic.png

<p>
  <div>
    URL in a.href doesn't change:
    <a href="http://www.example.org">
        But here it does: https://www.example.net/pic.gif
    </a>
    <br>
    URL in img.src doesn't change:
    <img src="https://www.example.net/img/abc.jpg">
  </div>
</p>
MOAR TEXT

answered Dec 26, 2015 at 13:50

Johan Karlsson

6,4761 gold badge22 silver badges28 bronze badges

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

2 Comments

Robin Over a year ago

Very nicely done! So, the markup issue cannot be fixed in the regex? This would be a better way of doing it to save system resources?

Johan Karlsson Over a year ago

@Robin Yes, stackoverflow.com/questions/1732348/…

user3896501 · Accepted Answer · 2015-12-26 13:10:26Z

0

change your regex to

/(https?:\/\/\S+(\.png|\.jpg|\.gif))/g

where s? means s is optional

this will supports https url

btw I'm not really understand your question 1

answered Dec 26, 2015 at 13:10

user3896501

3,0371 gold badge24 silver badges25 bronze badges

Collectives™ on Stack Overflow

Regex - Replace URL with image tag

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related