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

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.

• Chris Dutrow: Does the DOM solution work for the query arguments or does it only get specific enough to return the entire query string without breaking it into the specific, key-value pairs and decoding them?
• Tak: DOM solution will only return the entire query string. You could split() on "&" then loop through those results and split() on "=" which will give you a key/val pair. Test the key against the one you're searching for, break out of the loop and return the val.

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

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