Break a URL into its components

Question

I'm using javascript and would like to take a URL string that I have and break it down into its components such as the host, path, and query arguments.

I need to do this in order to get to one of the query arguments, which is itself a URL and is thus encoded in the original URL string.

I feel like there should be an easy way to do this in Javascript. Perhaps something that looks like this:

var what_I_Want = url("http://www.domain.com?queryArg1=somequeryargument").getQueryArgumentValue("queryArg1");

Answer 1

In javascript you can do this by using split() for the params and using the location object for the protocol and domain -- like Carl suggested

Also you can use parseUri as Tak suggested

There is also a jQuery plugin which makes parsing easier if you are already using jQuery in your project: https://github.com/allmarkedup/jQuery-URL-Parser#readme

Example:

$.url('http://allmarkedup.com?sky=blue&grass=green').param('sky'); // returns 'blue'

Answer 2

<script type="text/javascript" language="javascript">
newURL = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname;
</script>

Hope this will help..

Answer 3

The parseUri function will do everything you need

Edit Alternatively you can get the DOM to do the hard work for you and access properties on a newly created a object for different parts of the URL.

Answer 4

Probably not the greatest way of doing it but a simple method to get the query string in JavaScript would be to just use something along the lines of:

 a = "http://www.domain.com?queryArg1=somequeryargument";
 query = a.substring(a.indexOf('?')+1);

You could then split the query up based on the &'s and again on the = to get at whatever param you need.

Sorry if this ain't very helpful as its a bit of a low tech method :P

EDIT: Just wrote a quick little JavaScript object to get URL Query parameters for you (sort of like) in your example. Only tested it in chrome but in theory it should work :)

//Quick and dirty query Getter object.
function urlQueryGetter(url){
    //array to store params
    var qParam = new Array();
    //function to get param
    this.getParam = function(x){
    return qParam[x];
    }

    //parse url 
    query = url.substring(url.indexOf('?')+1);
    query_items = query.split('&');
    for(i=0; i<query_items.length;i++){
        s = query_items[i].split('=');
        qParam[s[0]] = s[1];
    }

}

//Useage
var bla = new urlQueryGetter("http://www.domain.com?queryArg1=somequeryargument&test=cheese");
alert(bla.getParam('test'));