I hate the DOM! The API sucks! Don’t you agree?

Regardless, we should definitely take advantage of what we’ve been given. So, if something is built into the DOM it would be silly not to use it, right?

Well, that’s what I believe and that’s why I think it’s okay to parse URLs via this API instead of trying to accomplish it in a language-agnostic manner (using a tonne of expensive string operations).

This short function returns an object containing all possible information you would want to retrieve from a URL:

parseURL

// This function creates a new anchor element and uses location
// properties (inherent) to get the desired URL data. Some String
// operations are used (to normalize results across browsers).
 
function parseURL(url) {
    var a =  document.createElement('a');
    a.href = url;
    return {
        source: url,
        protocol: a.protocol.replace(':',''),
        host: a.hostname,
        port: a.port,
        query: a.search,
        params: (function(){
            var ret = {},
                seg = a.search.replace(/^\?/,'').split('&'),
                len = seg.length, i = 0, s;
            for (;i<len;i++) {
                if (!seg[i]) { continue; }
                s = seg[i].split('=');
                ret[s[0]] = s[1];
            }
            return ret;
        })(),
        file: (a.pathname.match(/\/([^\/?#]+)$/i) || [,''])[1],
        hash: a.hash.replace('#',''),
        path: a.pathname.replace(/^([^\/])/,'/$1'),
        relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [,''])[1],
        segments: a.pathname.replace(/^\//,'').split('/')
    };
}

Usage

var myURL = parseURL('http://abc.com:8080/dir/index.html?id=255&m=hello#top');
 
myURL.file;     // = 'index.html'
myURL.hash;     // = 'top'
myURL.host;     // = 'abc.com'
myURL.query;    // = '?id=255&m=hello'
myURL.params;   // = Object = { id: 255, m: hello }
myURL.path;     // = '/dir/index.html'
myURL.segments; // = Array = ['dir', 'index.html']
myURL.port;     // = '8080'
myURL.protocol; // = 'http'
myURL.source;   // = 'http://abc.com:8080/dir/index.html?id=255&m=hello#top'

I’ve tested this solution in all modern browsers (including IE6) and it seems to work perfectly. If you spot any inconsistencies please let me know.

If you don’t feel comfortable using something which relies on the DOM then have a look at this although please note it’s about 12 times slower than the above solution…

I’ve been experimenting with different methods of retrieving a qualified (absolute) URL from a relative one. To show you what I mean let’s assume we have an anchor with the href attribute set to ‘page.html’:

<a href="page.html">Page</a>

How do we get the fully qualified URL which this href represents (e.g. ‘http://www.whatever-domain.com/path/to/page.html‘)?

The method below works quite well in most browsers but unfortunately (and unsurprisingly) it fails in IE6:

alert( theAnchor.href );
// All 'compliant' browsers return the fully qualified URL! :D
// IE6 returns just 'page.html' :(

Of course, you could go the complicated route and do something like this, but why make something so complicated when it doesn’t need to be? I think you’ll agree that regardless of how ‘hacky’ my method is it’s a lot better than a near 40 line string/regex marathon!

My magical method:

function qualifyURL(url){
    var img = document.createElement('img');
    img.src = url; // set string url
    url = img.src; // get qualified url
    img.src = null; // no server request
    return url;
}
// Tested successfully in IE6/7, FF2/3, Safari3, Opera9, Chrome (All on Windows XP)
 
// EXAMPLE:
var myRelativeURL = 'blah/page.html';
alert( qualifyURL(myRelativeURL) );

Oddly, IE6 returns a fully qualified URL for images (src) but does not do so for anchors (href). If you look at the above function you’ll notice that the generated image’s src is set to null; this is not entirely necessary but prevents any server requests after the new image is created.

Without any hesitation I give you the EASIEST way to test for an external link with JavaScript!

function isExternal(link) {
    return link.hostname === window.location.hostname;
}
 
// Usage:
var myLink = document.getElementById('my-link');
alert( isExternal(myLink) );

No regular expressions, no string operations, nothing! So simple!

The ‘hostname’ property is inherent of all links within a page (plus the location property of the window object). Sometimes you want to test an actual URL string instead of just a specific link; if so, then you’ll need to expand the function a little:

function isExternal(url) {
    var tempLink = document.createElement('a');
    tempLink.href = url;
    return tempLink.hostname === window.location.hostname;
}
 
// Usage:
alert( isExternal('http://james.padolsey.com') );

How ridiculously simple is that!?

Recently I’ve been non-stop with JSONP, I love and hate it! (to find out why, see my last post!)

Anyway, David Walsh recently posted a new How-to tip on his site: "Create a TinyURL with PHP" – His tutorial taps into the TinyURL API to retrieve the shortened URL which you can then display on a page.

For those that don’t want to get their hands dirty with PHP there is a very simple way to do it with just JavaScript, Ajax is not needed!

I’m one of the few people on this planet still using the Twitter web interface. I just cannot be bothered with any of those Adobe Air clients, they seem too intrusive. Twitter isn’t so great that it deserves it’s own process in Windows (sorry Twitter!). Plus, if I was using a client I’d feel like I’d have to tweet about every tiny insignificant thing that happens, which, although it is the point in twitter, would be a massive waste of time!

There are a few things which annoy me about the web interface though. The worst thing by far is that it’s very slow and sometimes just doesn’t work. There are also some posting issues; if I have a really long link which I want to share, it won’t let me press the "update" button (because my tweet is now over 140 characters) – but I know that Twitter will convert the URL to a tinyurl which will surely result in a tweet shorter than 140 characters but Twitter still insists on disallowing this action!

I got really tired of this, twitter wouldn’t let me tweet even though shortened versions of posted URLs would fit into the 140 character limit quite nicely! Out of desperation I decided to create a cool little GreaseMonkey script which solves this problem.

You can install the script here – (Sorry, it’s Firefox only, duh!)