Turn urls into links in text with jQuery
December 3rd, 2011 - kaore - Uncategorized
ShareThisHere 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
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.
10 Responses to “Turn urls into links in text with jQuery”
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!
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()));
});
}
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
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?
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.
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…