JavaScript - how to parse hash parameters from url?

Question

How do you get a part of a URL hash using js?

Here is what I have:

something.html?il=#/new/product/123

And I need to get "123" as a variable ...

***no libraries, pure javascript please.

Any ideas?

possible duplicate of [How can I get query string values?](http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values) — JJJ, Apr 16 '13 at 20:17
Although if the URL actually looks like that the value is in `window.location.hash`. — JJJ, Apr 16 '13 at 20:18
With that `#` in place as you have it, that's part of the URL _hash_, not the querystring! — Michael Berkowski, Apr 16 '13 at 20:18
As @MichaelBerkowski says, this is not the querystring. Either you've made a mistake in the design or terminology. — Joe, Apr 16 '13 at 20:19

Pablo Mescher · Accepted Answer · 2013-04-16T20:40:38.307

5

you need the hash, not the querystring. Anything after the # is called the hash of the url.

You can use document.location.hash and parse that string

var id = document.location.hash.split("/"); //convert the hash into an array, splitting with "/"
id = id.pop(); //pop will get the last item on the array

However readable and easy this method is, its not safe to assume the string you are searching will always be the last on the array. You could use a regular expression to further narrow the chances

var hash = document.location.hash,
    re = /\/new\/product\/(d+)/,
    id = hash.match(re);// for some reason this matches both the full string and the number
id = id.pop(); // so I must do this again

edited Apr 16 '13 at 20:40

answered Apr 16 '13 at 20:19

Pablo Mescher

26,057
6
30
33

3

`window.location` is safer than `document.location` http://stackoverflow.com/questions/7857878/window-location-vs-document-location – tvanc Feb 06 '14 at 02:10
@turibe in my example I'm not trying to set the location to something different so it even makes more sense to use document location instead of window location (which is read/write in all browsers while document.location is not). Anyway, I'm just learning about this difference so thanks for pointing it out, I guess.. – Pablo Mescher Feb 07 '14 at 17:31

score 4 · Answer 2 · answered Apr 16 '13 at 20:36

Here is some Javascript that should help you. Just take the return value from the getQuerystringNameValue() function and use $("#textboxID").val(returnValue); to assign it to the textbox.

alert("name1" + " = " + getQuerystringNameValue("name1"));
alert("name2" + " = " + getQuerystringNameValue("name2"));
alert("name3" + " = " + getQuerystringNameValue("name3"));


function getQuerystringNameValue(name)
{
    // For example... passing a name parameter of "name1" will return a value of "100", etc.
    // page.htm?name1=100&name2=101&name3=102

    var winURL = window.location.href;
    var queryStringArray = winURL.split("?");
    var queryStringParamArray = queryStringArray[1].split("&");
    var nameValue = null;

    for ( var i=0; i<queryStringParamArray.length; i++ )
    {           
        queryStringNameValueArray = queryStringParamArray[i].split("=");

        if ( name == queryStringNameValueArray[0] )
        {
            nameValue = queryStringNameValueArray[1];
        }                       
    }

    return nameValue;
}

score 2 · Answer 3 · answered Apr 16 '13 at 20:18

2

In JavaScript, document.location.search contains the query parameters. You can use Regular Expressions to parse out the pieces you need. However, in the URL in your example, it isn't the query string, it's the anchor, found in document.location.hash.

answered Apr 16 '13 at 20:18

Adrian

42,911
6
107
99

JavaScript - how to parse hash parameters from url?

3 Answers3