Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Parse URLs with Javascript

Saturday, April 5th, 2014 by Servage

 

One of my all-time favorite JavaScript tricks is a technique for parsing URLs into parts (host, path, query string etc) that doesn’t require any libraries or advanced regular expressions. It uses only the power of the DOM, and more precisely, the anchor element <a>.

As part of the regular set of properties that browsers assign to anchor elements, there are a few more that mimic the properties of the location object. Let me demonstrate:

<div>
    <label for="url">Enter a URL:</label> <input type="text" id="url" size="50" />
</div>

 

<ul id="parts">
    <li><label for="host">Host:</label> <input type="text" id="host" /></li>
    <li><label for="path">Path:</label> <input type="text" id="path" /></li>
    <li><label for="query">Query String:</label> <input type="text" id="query" /></li>
    <li><label for="hash">Hash:</label> <input type="text" id="hash" /></li>
</ul>
$(function(){
    // The URL we want to parse
    var url = 'http://tutorialzine.com/2013/07/quick-tip-parse-urls/?key=value#comments';
    // The magic: create a new anchor element, and set the URL as its href attribute.
    // Notice that I am accessing the DOM element inside the jQuery object with [0]:
    var a = $('<a>', { href:url } )[0];
    $('#host').val(a.hostname);
    $('#path').val(a.pathname);
    $('#query').val(a.search);
    $('#hash').val(a.hash);
    // Even more:
    // a.port, a.protocol,
    // a.origin (not available in older IE versions)
});

I am using jQuery here for convenience, but you could as easily use pure JavaScript by creating the anchor element with var a = document.createElement(‘a’), and then assigning the URL to a.href directly.

And here is another, a bit more complex example, which lets you type into a textfield and parses the URL in real time:

<ul>
    <li><label for="host">Host:</label> <input type="text" id="host" /></li>
    <li><label for="path">Path:</label> <input type="text" id="path" /></li>
    <li><label for="query">Query String:</label> <input type="text" id="query" /></li>
    <li><label for="hash">Hash:</label> <input type="text" id="hash" /></li>
</ul>
$(function(){

    // Cache the fields
    var url = $('#url'), host = $('#host'), path = $('#path'),
        query = $('#query'), hash = $('#hash');

    // Listen for the input event and update the fields

    url.on('input', function(){
        var a = $('<a>', { href:url.val() } )[0];

        host.val(a.hostname);
        path.val(a.pathname);
        query.val(a.search);
        hash.val(a.hash);
    });

    // Set a default URL
    url.val('http://tutorialzine.com/2013/07/quick-tip-parse-urls/?key=value#comments');

    // Trigger the input event
    url.trigger('input');
});

The only major difference here is that I am listening for the input event (not supported in older IEs, you will have to use keypress there) which notifies the event listener on every change of the field’s value.

Style External Links Differently

One useful application of this technique is to treat external links differently. You can add an icon next to each link that points offsite, or you can even display some sort of intermediate page that alerts people that they are being redirected to a third party website. To detect external links, we will compare the hostname properties of the DOM element and the location object:

$(function(){

    // Get only the external links:
    var external = $('a[href]').filter(function(){
        return this.hostname != location.hostname;
    });

    // In the return above, you may also compare the protocol
    // property if you wish to distinguish http from https links.

    external.addClass('external');

});

 

Parse URLs with Javascript, 5.0 out of 5 based on 2 ratings
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.