jQuery Regex to return url

Question

Possible Duplicate:
What is a good regular expression to match a URL?

I have a string sent from the server that looks like this:

"Hey, have a look at this picture here http://example.com/fantastic.jpg, isn't it nice?"

I would like a regex function which does something like this:

function returnUrl(text) {
    regex here ...
    return url;
}

I am really bad with regex, so I am coming here asking for help. Please have a look at the picture below to get the idea of what I mean:

stackOverflow automatic url recognize

This is stackOverflow automatically changing my inserted text in a clickable URL, I suppose it's jQuery / regex.

Thanks in advance.

EDIT:

Forgot to mention, this regex should only work for images (jpg, png, etc.) not for all links.

Sorry, I'm too lazy to make a solution, you have to explode your text, and check every row with your amazing regexp, because of regexp has some problem with \n\r in text — sukinsan, Aug 28 '12 at 08:35
My bad, I didn't reference that it should work for images only. Edited. — , Aug 28 '12 at 08:41

score 1 · Accepted Answer · edited May 23 '17 at 10:30

1

A simple one will be :

https?://[\w-\.\?\#\/]+

A complete one (which I use) will be :

[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?

And the last oe precisely come from What is a good regular expression to match a URL?

EDIT

A simple one for direct image links (see here)

https?://[\w-\.\/]+(\.jpg|\.jpeg|\.png|\.bmp)

edited May 23 '17 at 10:30

Community

1
1

answered Aug 28 '12 at 08:39

zessx

68,042
28
135
158

ouch, my bad. Please have a look at the edit. Sorry about that. – Aug 28 '12 at 08:41
The last one will be easy to modify for you. I agree, this is not the most complete one. – zessx Aug 28 '12 at 08:51
well, with some validation on the server side, it will work like a charm! thank you! – Aug 28 '12 at 08:52
actually, there is a problem with this regex, I am using ` var imageUrl = url.match( /https?://[\w-\.\/]+(\.jpg|\.jpeg|\.png|\.bmp)/g ); ` but it gives an uncaught syntaxerror: unexpected token illegal. What is this? Thank you. – Aug 28 '12 at 10:31
This issue could come from a copy/paste : http://stackoverflow.com/questions/5733275/chrome-uncaught-syntax-error-unexpected-token-illegal Try to rewrite it manually. – zessx Aug 28 '12 at 10:45
unbelieveable, still not working. now i'm getting: ` Uncaught SyntaxError: Unexpected token : ` with the code ` reg = http://https?://[\w-\.\/]+(\.jpg|\.jpeg|\.png|\.bmp); var imageUrl = url.match(reg); ` – Aug 28 '12 at 11:57
Now, you forgot to add delimiters : `reg = /https?://[\w-\.\/]+(\.jpg|\.jpeg|\.png|\.bmp)/; var imageUrl = url.match(reg);` – zessx Aug 28 '12 at 12:19
`var reg = /https?://[\w-\.\/]+(\.jpg|\.jpeg|\.png|\.bmp)/;` ... unexpected token illegal.... This is getting me crazy, really... – Aug 28 '12 at 12:50
I mean, have a look at this: http://jsfiddle.net/7Nphf/ – Aug 28 '12 at 12:59
Haha, sorry ^^' Using `/.../` delimiters, you need to escape `/` in your regex : `/https?:\/\/[\w-\.\/]+(\.jpg|\.jpeg|\.png|\.bmp)/` See here : http://jsfiddle.net/samsamX/7Nphf/1/ – zessx Aug 28 '12 at 13:14
pheew!! working now! thanks a lot! – Aug 28 '12 at 13:21
uhm, it doesn't seem to recognize the % symbol, that is sometimes found in URLS, what should I add to the regex? – Aug 28 '12 at 14:30
if you wanna add some symbols, do it at the end of this part : `[\w-\.\/]` (E.g : `[\w-\.\/\%]` - don't forget the backslash). – zessx Aug 28 '12 at 14:32

score 1 · Answer 2 · answered Aug 28 '12 at 08:41

1

You can use like this :

function returnUrl(text) {
     var reg = /[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi;
     var url = text.match(reg).toString();
     return url;
}

Here is the demo : http://jsfiddle.net/4vBLH/

answered Aug 28 '12 at 08:41

Nishu Tayal

20,106
8
49
101

check the edit. sorry about that – Aug 28 '12 at 08:44

score 0 · Answer 3 · edited May 23 '17 at 12:26

0

You should look at How to mimic StackOverflow Auto-Link Behavior.

URL regex from RegexBuddy library (use as case-insensitive):

\b(https?|ftp|file)://[-A-Z0-9+&@#/%?=~_|$!:,.;]*[A-Z0-9+&@#/%=~_|$]

See it in action.

edited May 23 '17 at 12:26

Community

1
1

answered Aug 28 '12 at 08:45

mmdemirbas

9,060
5
45
53

jQuery Regex to return url

3 Answers3