4

Possible Duplicate:
How to replace plain URLs with links?

I have several strings that have links in them. For instance:

var str = "I really love this site: http://www.stackoverflow.com"

and I need to add a link tag to that so the str will be:

I really love this site: <a href="http://www.stackoverflow.com">http://www.stackoverflow.com</a>

I imagine there would be some regex involved, but I can't get it to work for me with match(). Any other ideas

Community
  • 1
  • 1
bjork24
  • 3,153
  • 7
  • 35
  • 46
  • Simple regular expressions are a naive approach to this problem and will fail a lot of tests for edge cases. When detecting URLs, it's **ALWAYS** better to rely on a specialized library. [Here's why](http://stackoverflow.com/a/21925491/1269037). – Dan Dascalescu Feb 21 '14 at 05:46
  • I created this library that might help anyone looking for a solution in this page: http://ali-saleem.github.io/anchorme.js/ – Alex C. Jul 16 '15 at 19:53

3 Answers3

10

That's easy:

str.replace( /(http:\/\/[^\s]+)/gi , '<a href="$1">$1</a>' )

Output:

I really love this site: <a href="http://www.stackoverflow.com">http://www.stackoverflow.com</a>
Sean Patrick Floyd
  • 292,901
  • 67
  • 465
  • 588
  • The code above will fail a lot of tests for edge cases. When detecting URLs, it's **ALWAYS** better to rely on a specialized library. [Here's why](http://stackoverflow.com/a/21925491/1269037). – Dan Dascalescu Feb 21 '14 at 05:45
  • @DanDascalescu I agree – Sean Patrick Floyd Feb 21 '14 at 09:07
  • @SeanPatrickFloyd: thank you! BTW/OT: any chance to consider [this reopen request](http://stackoverflow.com/questions/823898/when-to-use-visual-diffing-vs-unified-diff-patch-files) and [this one](http://stackoverflow.com/questions/21856097/how-can-i-check-javascript-code-for-syntax-errors-only-from-the-command-line)? Thank you! – Dan Dascalescu Feb 21 '14 at 09:26
4
function replaceURL(val) {
  var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
  return val.replace(exp,"<a href='$1'>$1</a>"); 
}
Pradeep Singh
  • 3,582
  • 3
  • 29
  • 42
  • +1 for the elaborate regex. didn't know js had the \b marker or I would have used it – Sean Patrick Floyd Dec 30 '10 at 15:44
  • The code above will fail a lot of tests for edge cases. When detecting URLs, it's **ALWAYS** better to rely on a specialized library. [Here's why](http://stackoverflow.com/a/21925491/1269037). – Dan Dascalescu Feb 21 '14 at 05:45
0

I can think of a quick and dirty Regular Expression based solution. Something on the lines of

RegExp exp = new RegExp('(.*)(http://[^ ])(.*)', 'g'); // matches URLs
string = string.replace(exp, $1 + '<a href=\"' + $2 + '\">' + $2 '</a>' + $3);

I haven't tested it yet though, so needs some refining.

adarshr
  • 61,315
  • 23
  • 138
  • 167
  • Regular expressions like that will fail a lot of tests for edge cases. When detecting URLs, it's **ALWAYS** better to rely on a specialized library. [Here's why](http://stackoverflow.com/a/21925491/1269037). – Dan Dascalescu Feb 21 '14 at 05:46