autolink-js is a small (about half a kilobyte), simple, and tested JavaScript tool that takes a string of text, finds URLs within it, and hyperlinks them.

autolink-js adds an autoLink() method to JavaScript's String prototype, so you can use it on any JavaScript string. Take a look at the tests, but essentially, after including either autolink.js or autolink-min.js to your page, it works like this:

Input :

"This is a link to Google http://google.com".autoLink()

Output :

"This is a link to Google <a href='http://google.com'>http://google.com</a>"

Additional Options

You can pass any additional HTML attributes to the anchor tag with a JavaScript object, like this:

Input :

"This is a link to Google http://google.com".autoLink({ target: "_blank", rel: "nofollow", id: "1" })

Output :

"This is a link to Google <a href='http://google.com' target='_blank' rel='nofollow' id='1'>http://google.com</a>"

Example :

<html>
  <head>
    <!-- Load jQuery and autolink-js -->
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script>
    <script src='../autolink.js'></script>
  </head>
  <body>
    <ul>
      <li>Our first item contains no links.</li>
      <li>Our second item contains a link to Google http://google.com.</li>
      <li class='new_window'>Our third item contains a link that opens in a new window http://google.com</li>
      <li>Our fourth item contains a link to Google http://google.com and a shortened bitly http://bit.ly/1337</li>
      <li class='callback'>Our fifth item contains a link to image https://www.google.com/images/srpr/logo3w.png</li>
    </ul>
    <script type='text/javascript'>
        $(document).ready(function() {
          $('li:not([class!=""])').each(function() {
            var that = $(this);
            var text = that.html();
        
            that.html(text.autoLink());
          });
        
          var callback = $('li.callback');
        
          $(callback).html(
            callback.html().autoLink({ callback: function(url){
              return /\.(gif|png|jpe?g)$/i.test(url) ? '<img src="' + url + '">' : null;
            }})
          );
        
          var new_window = $('li.new_window');
        
          $(new_window).html(
            new_window.html().autoLink({ target: "_blank" })
          );
        });
    </script>
  </body>
</html>