Cibul Tech Blog - Fiddling with PHP, javascript and things

Turn urls into links in text with jQuery

ShareThis

Here is a little function that can be used to turn urls found in text on a page into clickable links. I assembled it and tweaked it taking bits and pieces from several forums.

See it running here

/* doLinks script */

function linkify(inputText, options) {
   
  this.options = {linkClass: 'url', targetBlank: true};

  this.options = $.extend(this.options, options);
 
  inputText = inputText.replace(/\u200B/g, "");

  //URLs starting with http://, https://, or ftp://
  var replacePattern1 = /(src="|href="|">|\s>)?(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;ï]*[-A-Z0-9+&@#\/%=~_|ï]/gim;
  var replacedText = inputText.replace(replacePattern1, function($0,$1){ return $1?$0:'<a class="'+ this.options.linkClass + '" href="' + $0 + '"' + (this.options.targetBlank?'target="_blank"':'') + '>'+ $0+ '</a>';});

  //URLS starting with www and not the above
  var replacePattern2 = /(src="|href="|">|\s>|https?:\/\/|ftp:\/\/)?www\.[-A-Z0-9+&@#\/%?=~_|!:,.;ï]*[-A-Z0-9+&@#\/%=~_|ï]/gim;
  var replacedText = replacedText.replace(replacePattern2, function($0,$1){ return $1?$0:'<a class="'+ this.options.linkClass + '" href="http://' + $0 + '"' + (this.options.targetBlank?'target="_blank"':'') + '>'+ $0+ '</a>';});

  //Change email addresses to mailto:: links
  var replacePattern3 = /([\.\w]+@[a-zA-Z_]+?\.[a-zA-Z]{2,6})/gim;
  var replacedText = replacedText.replace(replacePattern3, '<a class="' + this.options.linkClass + '" href="mailto:$1">$1</a>');

  return replacedText;
}

$.fn.doLinks = function(){
  this.each(function(){
    $(this).html(linkify($(this).html()));
  });
}

Just apply .doLinks() on the elements you need to process. Let me know of links that don’t work with this.

12 Responses to “Turn urls into links in text with jQuery”

Vicky December 30th, 2011 @ 12:06

Hey this works great. But having problem when we specify link in src=”http://www.mydomain.com/upload/1.jpg” It convert into link and spoil the image….if possible change regular expression to pass through it…thanks…if you done then let me know…

Vicky December 30th, 2011 @ 12:10

Hey i did it…

var replacePattern1 = /(src=”|” | href=”|”>|\s>)?(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;ï]*[-A-Z0-9+&@#\/%=~_|ï]/gim;

Thanks

kaore December 30th, 2011 @ 12:15

I think we came up with a solution in parallel. I updated the code in the post. Thanks!

Vicky March 3rd, 2012 @ 09:00

Hey i want to convert word with #tag into link. I wrote the below code let me know where m wrong.

function linkify(inputText, options) {

this.options = {linkClass: ‘url’, targetBlank: true};

this.options = $.extend(this.options, options);

inputText = inputText.replace(/\u200B/g, “”);

var replacePattern1 = /#[a-zA-Z0-9]*/gim;
var replacedText = inputText.replace(replacePattern1, function($0,$1){return $1?$0:’‘+ $0+ ‘‘;});

return replacedText;
}

$.fn.doSearch = function(){
this.each(function(){
$(this).html(linkify($(this).html()));
});
}

Vicky May 31st, 2012 @ 14:09

hey i need your help again suppose there is something like id=”viruddh7(www.songs.pk).mp3″ so how to avoid this type of scenario ?? i don’t want to convert this thing into link

Vicky June 3rd, 2012 @ 21:01

This is great article but it can’t handle certain situation so i modified it bit so check the article below that works great with possible all situation…

http://www.javaquery.com/2012/06/turn-urls-into-links-in-text-with.html

Nidaan June 18th, 2012 @ 17:29

I want the linkify function to work exactly like Twitter. Means it converts the urls like google.com into link.

You can check the for following text by tweeting it and see Twitter linkify it:

Check link google.com and yahoo.com

Richard Palomer August 13th, 2012 @ 05:27

Could not get anything to work. In Facebook the link detection script will survey a valid link for photos and let your flip through them to select one to add to the lead section of your update. An invalid link (one which cannot be scanned for photos) will not be lit up in the post, as I remember. … I put the script in my head section and gave the /folderaddress/doLinks dot js to the doLinks dot js file, but nothing worked. See my http://owou.com/?p=1558 to see if I have found anything that works .. and an email address in case you want to email me. Thanks … Rich

Bill October 25th, 2012 @ 23:10

The function linkify refers to this.options, but it appears that linkify is not called within any specific context, so I would presume this would refer to the global object. Not good. What is “this” expected to refer to?

Odam April 18th, 2013 @ 20:43

Works like a charm. Thaks!

tested with jQuery 1.9.1

webpage October 18th, 2013 @ 14:55

Hey there just wanted to give you a quick heads up. The
text in your content seem to be running off the screen in Opera.
I’m not sure if this is a formatting issue or something to do with browser compatibility but I thought I’d
post to let you know. The design and style look great though!
Hope you get the issue solved soon. Thanks

http://jeremyequm.wikispaces.com/Want+To+Make+Money+In+Gold+Read+These+Tips. February 2nd, 2014 @ 15:46

It’s actually a nice and usful piece of information.
I am glad that you simply shared this helpful info with us.

Please stay us informed like this. Thankks for sharing.

Leave a Reply


RSS 2.0You can follow any responses to this entry through You can leave a response, ou trackback from your own site.