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

score 17 · Accepted Answer · edited May 23 '17 at 12:09

17

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.

edited May 23 '17 at 12:09

Community

1
1

answered Jul 03 '11 at 01:51

Tak

11,428
5
29
48

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? – Chris Dutrow Jul 03 '11 at 01:57
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. – Tak Jul 03 '11 at 02:01

score 3 · Answer 2 · answered Sep 01 '14 at 11:03

3

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

Hope this will help..

answered Sep 01 '14 at 11:03

Prithweema

141
4

score 2 · Answer 3 · answered Jul 03 '11 at 01:59

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'

Carl · Answer 4 · 2011-07-03T02:11:20.320

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

Break a URL into its components

4 Answers4

Linked