-1

I know this question is extremely similar to one that has been asked before but it's not exactly the same and should not be treat as such (please mods/admins).

I'm currently using the Linkify() function that I found in a piece of code posted on here in another thread, however it does not contain a Regular Expression for Images. It only covers http, https and mailto but does not cover a link that may contain an image.

Basically what I'm asking, is there a regular expression that I can add to that function (there are already 3 patterns so one of images would be replacedPattern4) that would check for an image link only?

For example if in the text it finds a link like http://www.example.com/images/logo.jpg then it converts it to an image tag but obviously with the src="" containing that url. Reason I'm asking is for a chat project I'm working on I want to convert text links that are pointing to images to actual images just like Facebook does on the timeline.

Here is what I'm using and have added to the Linkify function as a fourth RegEx pattern:

replacePattern4 = /(\b(http):\/\/.(?:jpg|png|gif))</
replacedText = replacedText.replace(replacePattern4, '<img src="$1" height="100" width="100" />');

However this isn't working at all! Any ideas anyone??

Any help here would be great, please bare in mind the code the Linkify already uses.

Thanks!

Geordie Dave
  • 65
  • 3
  • 8
  • Can you include and example and what the expected output is? – Sam Battat Jan 13 '15 at 23:57
  • 1
    For anyone that visits this and wants the poetry of bobince http://stackoverflow.com/a/1732454/451600 – Captain Giraffe Jan 13 '15 at 23:58
  • What about relative links? Should the regex detect them? – David Faber Jan 14 '15 at 00:02
  • Hilarious Captain Giraffe but doesn't help me at all. The expected output Sam, should be as it would be turning the link into an actual image inserted into the chat text. Literally all the RegEx should contain is the pattern to find urls that are image links not just general hyperlinks. – Geordie Dave Jan 14 '15 at 00:09
  • Thanks Phil but how would I check an actual string in javascript using that? and then replace any text found in the string, which given that it would be a bunch of chat text and be quite long, with an image tag containing the hyperlink? This is why I wanted to use Regular Expressions but none I find seem to work. I'll amend my original post to contain what I'm using so you can see. – Geordie Dave Jan 14 '15 at 00:39
  • Ok first, what is *Linkify*? Second, are you looking for hyperlinks in the text content or `` elements where the `href` points to an image? – Phil Jan 14 '15 at 00:42

1 Answers1

0

Why not just use jQuery's attribute-ends-with selector. For example

$('a[href$=".jpg"], a[href$=".png"], a[href$=".gif"]').each(function() {
    $(this).replaceWith($('<img>').attr('src', this.href));
});

JSFiddle

Phil
  • 157,677
  • 23
  • 242
  • 245
  • I think OP meant that the text itself would contain a link, not an anchor element. – Ja͢ck Jan 14 '15 at 00:39
  • OP needs to clarify then. The question says *"I want to convert text links that are pointing to images"*. I took this to mean text anchors – Phil Jan 14 '15 at 00:41
  • Yes Jack that is exactly it. The content of each chat message text would be contained with a string variable called chatContent which I then use chatContent = linkify(chatContent); To turn any links into fully clickable hyperlinks, however within that linkify function I need to add a fourth pattern for image links so it changes them into actual images that can be seen obviously turning the text links in to img tags and putting the link into the src="" part. – Geordie Dave Jan 14 '15 at 00:43
  • @GeordieDave Why don't you simply combine the output of linkify() with what Phil has posted, then? That seems like the most straightforward solution. – Ja͢ck Jan 14 '15 at 00:48
  • How would I do that though? At the end of the linkify function this is what is in the code: return replacedText so how would I use Phil's answer with that? – Geordie Dave Jan 14 '15 at 00:53