views:

3571

answers:

7

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"&gt;http://www.google.com&lt;/a&gt;

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

+9  A: 

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.

Pseudo Masochist
Thanks man! Good point...
Elijah Manor
I disagree, solving this problem involves lots of DOM traversing (maybe not a lot of CSS selectors) and jQuery is a fine tool to solve this with. (See my example draft for a jQuery plugin below.)
Már Örlygsson
A: 

I suggest you do this on your static pages before rendering to the browser, or you'll be pushing the burden of conversion computation onto your poor visitors. :) Here's how you might do it in Ruby (reading from stdin, writing to stdout):

while line = gets
  puts line.gsub( /(^|[^"'])(http\S+)/, "\\1<a href='\\2'>\\2</a>" )
end

Obviously, you'll want to think about how to make this as robust as you desire. The above requires all URLs to start with http, and will check not to convert URLs that are in quotes (i.e. which may already be inside an <a href="...">). It will not catch ftp://, mailto:. It will happily convert material in places like <script> bodies, which you may not want to happen.

The most satisfactory solution is really to do the conversion by hand with your editor so you can eyeball and approve all substitutions. A good editor will let you do regexp substitution with group references (aka back references), so it shouldn't be a big deal.

Pistos
A: 

If you want a solution from another perspective... if you can run the pages through php and HTML Purifier, it can autoformat the output and linkify any urls.

DGM
+12  A: 

NOTE: An updated and corrected version of this script is now available at http://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 = /(^|&lt;|\s)(www\..+?\..+?)(\s|&gt;|$)/g,
      url2 = /(^|&lt;|\s)(((https?|ftp):\/\/|mailto:).+?)(\s|&gt;|$)/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, '&amp;')
                         .replace(/</g, '&lt;')
                         .replace(/>/g, '&gt;')
                         .replace(url1, '$1<a href="http://$2"&gt;$2&lt;/a&gt;$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 occurrances 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 :-)

Már Örlygsson
Minor syntax error: while (i--) { // note the extra bracketThanks! That plugin was exactly what I was looking for.
Will Moffat
Fixed the error, thanks!
Már Örlygsson
BTW, an updated and corrected version of this script is now available (GPL/MIT) at http://github.com/maranomynet/linkify
Már Örlygsson
A: 

You are not precise enough on why you want this but...

If this is just about lazyness of creating the links, you should really reconsider using JavaScript to dynamically create links on your website. This means that every browser that don't have JavaScript will not be able to use your website.

There may not be many browsers out there without JavaScript but there are still some important ones like GoogleBot or YahooBot.

If this is really taking you a long time to create the links, you may consider a server-side alternative... Or maybe a not-so-dynamic solution like a Perl or Ruby script that you could run on your source files before deploying them.

Vincent Robert
A: 

Doing this server-side is not an option sometimes. Think of a client-side Twitter widget (that goes directly to Twitter API using jsonp), and you want to linkify all the URLs in the Tweets dynamically...

Duncan Idaho
A: 

I am just wondering if someone can make a javascript that can be used in a blogger template that will do the same thing?

Scott