Jquery: Find all image links and convert them to some default thumbs?

Question

I have WYSIWYG and I don't allow users to upload images, just links to images outside the site.

So I want to find every image link/path and replace it with some default thumb, where user can click and that image will be shown in modal window. I'm using qTip, but that will be my part of the job :)

So if there is:

http://sstatic.net/so/img/logo.png

or

http://l.yimg.com/a/i/ww/news/2010/02/22/fries_on_plate-pd.jpg

They will be "converted" to something like:

<a href="http://OriginalPathToImage" rel="tool_tip"><img src="/SomeDefaultImageThumb.jpg" /></a>

So, how to find all images? What is RegExp for finding .jpg, .gif, .png.... or some other solution?

Answer 1

It's a little tough to say exactly what to do, since I don't know what you're searching.

If the links are currently part of a tag, it will be simple.

But it sounds like the image hrefs are not currently part of any tag. Is that right?

If so, and you think you need a reg exp, you could try,

var result = text.match(/http:\/\/\S+(\.png|\.jpg|\.gif)/g);

(This is a simple one that could I'm sure be tightened up a bit. As it is, it will not allow 'space' characters in the href, for example.)

It will search for 'http://' plus anything except a space character plus '.png' or '.jpg' or '.gif', and return an array of the results.

So if the search text was:

var text = 'http://sstatic.net/so/img/logo.png some text http://l.yimg.com/a/i/ww/news/2010/02/22/fries_on_plate-pd.jpg more text http://l.yimg.com/this/is/another/path/to_this_image.jpg';

It would return an array of 3 results.

Using jQuery (since you tagged it) you could then:

var $aTag;

for(i in result) {
    $aTag = $('<a><img src="/SomeDefaultImageThumb.jpg" /></a>').attr({'href': result[i]});
    $('body').append($aTag);
}

Which will append the new tags, in this case, to the body.

EDIT: Using your example, I added parenthesis around the search query, and referenced it with href="$1" in the replace string -

An extra set of parenthesis was added to the search string. This creates the 'memorized' group that was referenced by $1.

$("div.test").each(function() { 
    $(this).html($(this).html().replace(/(http:\/\/\S+(\.png|\.jpg|\.gif))/g, '<a href="$1"><img src="/SomeDefaultImageThumb.jpg" /></a>')); 
});

There may be security implications to this if malicious code can be hidden in the link string. Not sure though. If that's an issue, there should be another way to go about it.

EDIT: Excludes hrefs from site's domain (assuming they are part of the same text that is being searched).

var hostname = window.location.hostname.replace(/\./g,'\\.');
var re = new RegExp('(http:\\/\\/[^' + hostname + ']\\S+[\\.png|\\.jpg|\\.gif])','g');

$("div.test").each(function() {
    $(this).html($(this).html().replace(re, '<a href="$1"><img src="/SomeDefaultImageThumb.jpg" /></a>')); 
});

Answer 2

I'm loosing my cookies at home, so I have to reply again.

I'm not getting the whole link, just extension:

<a href=".jpg">
<a href=".png">

Thanks one more time

Answer 3

RegEx? We don't need no stinkin' RegEx!

$('a[href$="jpg"], a[href$="jpeg"], a[href$="png"], a[href$="gif"]')

CSS selectors can do that for you. The above selects all a elements with an href ending with the specified formats.