Intro
Recently we received a few requests to add an additional feature on
MonoX's social networking wall to that would turn plain text URLs into clickable links. Those of you familiar with MonoX know that the its wall uses a simple
ASP.NET Textbox, with jQuery plugins providing for more advanecd functionality - autogrow and watermark. Sometimes you will want to utilize the simplicity and "lightweightness" of the textbox while keeping a bit of interactivity and user friendliness. This article demonstrates techniques for "linkifying" texts on just about any Web form out there.
Choosing a tool
Technology has greatly advanced over the past few years. Nowadays it's very easy to find any kind of
jQuery plugin for almost anything. Instead of using more powerful and more complicated HTML editors, I decided to approach the problem using a
jQuery plugin. We've decided to go with the linkify plugin which can be found
here. This plugin detects URLs in the HTML markup and converts them into clickable links.
Why choose linkify?
We've explored a lot of alternatives, but neither of them worked perfectly. Linkify offered the best solution due to its plugin functionality. We could easily improve the existing functionality without the need to edit the plugin source code directly, which saved us a huge amount of time.
Linkify plugins
The built-in functionality itself works great. However, we expanded the default functionality with our own linkify plugin.
The plugin concept allows us to easily add a new functionality or extend the default behavior. The regular expression which we are about to demonstrate is a compilation of our own improvements over the default plugin and suggestions found on the projects
github page.
Now let's see how our plugin looks like:
jQuery.extend(jQuery.fn.linkify.plugins, {
monoPluginCallback: function (html) { return html.replace(/(^|[\[\{”"'(\s]|<)(www\..+?\..+?)((?:[:?]|\.+)?(?=(?:\s|$)|>|[)\]\}”"',]))/g, '$1<a href="<``>://$2">$2</a>$3').replace(/(^|[\[\{“"'(\s]|<)((?:(?:https?|ftp):\/\/|mailto:).+?)((?:[:?]|\.+)?(?=(?:\s|$)|>|[)\]\}”"',]))/g, '$1<a href="$2">$2</a>$3') }
});
Using linkify
Using linkify is pretty much straightforward, once we've defined our plugin all we have to do is to initialize linkify as demonstrated below. In this scenario we are using our custom plugin along with the default plugin:
$('.myClass').linkify('monoPluginCallback');
As you can see, we need to attach it to a desired class in which we want our contents to be linkified, and optionally we can tell it which plugins to use. If we want to use all plugins then we should initialize it using the following parameters:
$('.myClass').linkify('*');
Conclusion
Linkify is a great jQuery plugin which allows us to easily turn plain text URLs into clickable links without having to reinvent the wheel. Its plug-in architecture allows us to easily add additional functionality or to extend the existing functionality. I have attached a small sample which demonstrates the techniques explained in this article.