Quick Tip: The Easiest Way to Parse URLs with JavaScript

JavaScript | Tip

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:

$(function(){

    // The URL we want to parse
    var url = 'https://blog.daitra.xyz/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)

});
<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>
html{
    background-color:#f4f4f4;
    font:14px/1.4 sans-serif;
    color:#666;
}

ul{
    list-style:none;
    width:300px;
    margin:50px auto;
}

li{
    padding:4px;
}

input{
    font:inherit;
    border:1px solid #ccc;
    border-radius:2px;
    padding:2px 5px;
}

label{
    width:90px;
    display:inline-block;
    text-align:right;
}

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:

$(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('https://blog.daitra.xyz/2013/07/quick-tip-parse-urls/?key=value#comments');

    // Trigger the input event
    url.trigger('input');
});
<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>
  
html{
    background-color:#f4f4f4;
    font:14px/1.4 sans-serif;
    color:#666;
}

ul{
    list-style:none;
    width:300px;
    margin:0 auto;
}

li{
    padding:4px;
}

input{
    font:inherit;
    border:1px solid #ccc;
    border-radius:2px;
    padding:2px 5px;
}

label{
    width:90px;
    display:inline-block;
    text-align:right;
}

div{
    padding:40px;
    text-align:center;
}

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');

});
<a href="?page=123">Page 1</a>
<a href="/page2.html">Page 2</a>
<a href="https://demo.blog.daitra.xyz/">Page 3</a>
<a href="https://blog.daitra.xyz/page3.html">Page 4</a>
<a href="https://google.com/">Page 5</a>
html{
    background-color:#f4f4f4;
    font:15px/1.4 sans-serif;
    color:#666;
}

body{
    padding:50px;
    text-align:center;
}

a{
    color:#999;
}

a.external{
    color:green;
}

a.external:after{
    content:' ⇲';
}

This concludes today's quick tip! I hope that you find this technique useful. Know of other cool things that can be achieved with the DOM? Share them in the comment section.

Bootstrap Studio

The revolutionary web design tool for creating responsive websites and apps.

Learn more

Related Articles

Christian

Now I will take this method instead the php parse_url. Very nice Tutorial, thank you very much!

Chrysto Panayotov

Great tip, Martin! Here is another : you can get current URL with:

var currentURL = $(location).attr("href");

Very useful for social-media / sharing scripts.

Martin Angelov

Thanks! You can use location.href directly - no need for jQuery here. location has other useful properties as well, try running console.dir(location) in the console to see them.

Tuna Abutbul

The lest example (Style External Links Differently) doesn't work with IE

Bruno

Thanks for the quick tip.
Really useful!

Sebastian Reinhard

A better solution would just be to create a new URL object, like so:

var url = new URL("http://www.example.com/path#hash");

You'll have the same properties (hostname, path, hash, etc.) ;)

sancoLgates

great help, Thanks