jQuery urlToLink Plugin

After stumbling upon Hugo Dias’s snippet, I decided to make it a jQuery plugin so it could be easily used on my personal projects.

The plugin searches for any URLs on the text and transforms them into HTML <a> elements.

Attention: This plugin erases the event bindings of the element and its children. Use it only on elements that you are sure won’t affect the overall behavior of your application.

Demo & Download

Here is a demo of the plugin working.

Download it from GitHub.

How to Use

Set Up

jQuery urlToLink Plugin uses, as the name implies, the jQuery library. You will need to include these two JavaScript files in your page:

<script src="js/jquery.js"></script>
<script src="js/jquery.urlToLink.js"></script> 

Transforming URLs Into Links

Now that you have the files included in your page, you will have to call the plugin to see the magic happening. Use the following example as guide:

$(document).ready(function(){
  $('p').urlToLink();
});

Parameters

The only parameter is the target and the default value is _self.

You can change the default value like this:

$(document).ready(function(){
  $('p').urlToLink({
    target : '_blank'   
  }); 
});

Or you can overwrite the default value anywhere on your script like this:

$.fn.urlToLink.defaults = { target : '_blank' }

And that’s it. If you have any comments, please contact me via Twitter or fork the project on GitHub.