jQuery Text to Link Script? [duplicate]

Question

Does anyone know of a script that can select all text references to URLs and automatically replace them with anchor tags pointing to those locations?

For example:

http://www.google.com 

would automatically turn into

<a href="http://www.google.com">http://www.google.com</a>

Note: I am wanting this because I don't want to go through all my content and wrap them with anchor tags.

Answer 1

NOTE: An updated and corrected version of this script is now available at https://github.com/maranomynet/linkify (GPL/MIT licence)

---

Hmm... to me this seems like the perfect task for jQuery.

...something like this came off the top of my mind:

// Define: Linkify plugin
(function($){

  var url1 = /(^|<|\s)(www\..+?\..+?)(\s|>|$)/g,
      url2 = /(^|<|\s)(((https?|ftp):\/\/|mailto:).+?)(\s|>|$)/g,

      linkifyThis = function () {
        var childNodes = this.childNodes,
            i = childNodes.length;
        while(i--)
        {
          var n = childNodes[i];
          if (n.nodeType == 3) {
            var html = $.trim(n.nodeValue);
            if (html)
            {
              html = html.replace(/&/g, '&')
                         .replace(/</g, '&lt;')
                         .replace(/>/g, '&gt;')
                         .replace(url1, '$1<a href="http://$2">$2</a>$3')
                         .replace(url2, '$1<a href="$2">$2</a>$5');
              $(n).after(html).remove();
            }
          }
          else if (n.nodeType == 1  &&  !/^(a|button|textarea)$/i.test(n.tagName)) {
            linkifyThis.call(n);
          }
        }
      };

  $.fn.linkify = function () {
    return this.each(linkifyThis);
  };

})(jQuery);

// Usage example:
jQuery('div.textbody').linkify();

It attempts to turn all occurrences of the following into links:

• www.example.com/path
• http://www.example.com/path
• mailto:[email protected]
• ftp://www.server.com/path
• ...all of the above wrapped in angle brackets (i.e. <...>)

Enjoy :-)

Answer 2

JQuery isn't going to help you a whole lot here as you're not really concerned with DOM traversal/manipulation (other than creating the anchor tag). If all your URLs were in <p class="url"> tags then perhaps.

A vanilla JavaScript solution is probably what you want, and as fate would have it, this guy should have you covered.