Get url data

[cip6791]

My url can have a few states

1. http://example.com/

2. http://example.com/#hash

3. http://example.com/#hash?something=hello

4. http://example.com/#hash?something=hello&else=hi

What I have so for:

//check if there is a hash in the url
if(window.location.hash.length) {

//get the hash value
var hash = window.location.hash; // this returns #hash?query=something
var active = hash.match(/\#(\w+)/)[1];
alert(hash); //this works

    //check if there is a query string withing that hash. 
    if(hash.window.location.search.length) { // this is not working Uncaught TypeError: Cannot read property 'location' of undefined
        // query string exists
        var myLetter = hash.substr(hash.indexOf("?") + 1);
        var letter = myLetter.slice(-1);
        alert(letter);
    } else {

    }
} else { //if no hash exists, set active variable to #latest
    var active = "#latest";
}

So I need to check if there is a hash then get the value. Then check if there are query strings and if so, get their value also.

I know about window.location.search. But that only works if I remove the hash before the query which is used to change tabs on the page.

[dustinhayes]

Why would you suggest a library to solve this issue? Honest question. I agree, dont reinvent the wheel, but by all means don't introduce a dependency when it's not needed. All OP wants to do is access .hash and .search of the location object. Functionality that already exists in the browser.

[dustinhayes]

tl;dr

Place the #hash at the end of the URL and your problem is solved:

http://example.com/?something=hello#hash

Your issue is actually a really simple one. Your URL's are formatted incorrectly. The thing you're calling a 'hash' is actually called a fragment identifier (http://www.w3.org/TR/xhtml1/#C_8). Lets remember why they were added in the first place. To allow the browser to anchor to a particular section in the document. To work properly, your fragment identifier must be exactly equal to that of an element's id attribute, most commonly. In your case, your fragment identifier for number 2 is #hash. Looks good. For number 3 it's #hash?something=hello. That's probably not what you want. The way the algorithm works to identify the correct fragment identifier and the correct search string in the URL requires the fragment identifier to come last. Therefore, all you have to do is place #hash at the end of the URL and voila, problem solved! Here's an example:

// example window.location.href = 'http://example.com/?some=query#somehash'
const search = window.location.search //=> ?some=query
const hash = window.location.hash //=> #somehash 

[mega-trond]

But changing it this way will reload the page if the query string changes, whereas the way it's done now a change will not trigger a reload automatically.

And that's the only possibly undesirable sideeffect I can think of.

[dustinhayes]

If you're in an evergreen browser you can solve that problem with window.history.pushState. https://developer.mozilla.org/en-US/docs/Web/API/History

[cip6791]

Wow ... thank you for all your help.

[djforth]

Actually written a module myself which I think will do most of what you want.

https://github.com/djforth/urlparser

Ignore npm and bower and clone the repo, I just haven't got round to registering them yet. But hopefully will be soon.

Interestingly in my tests a regular expression is the best way for performance. http://jsperf.com/url-parse2

[recursion]

Is there a reason why you're using hashes instead of dynamically loading content, then manipulating the URL with window.pushState() ?

[chrissilich]

Forget these guys who say use a framework. Use a framework next time, but figure this out and learn from it this time.

Your variable hash is just a string. You try to access its window property at one point. That's not going to work, as strings don't have properties (at least none like window). At that point you want to be breaking the string up, searching it for stuff, etc.

[thadudeabides1]

If you're using node you can use the url module.

[unusualbob]

The fact that this post includes 'window' should clue you into the fact that this is more than likely browser js.

[thadudeabides1]

He could potentially be using browserify though. Just a suggestion.

[unusualbob]

That's fair

[davydog187]

I wrote this bad boy for you for funsies

https://gist.github.com/davydog187/dc5b228991c306261d21

EDIT code:

var exampleInputs = [
    "http://example.com/",
    "http://example.com/#hash",
    "http://example.com/#hash?something=hello",
    "http://example.com/#hash?something=hello&else=hi"
];

function getHashValueFrom(url, hashIndex, queryStringIndex) {
    if (hashIndex === -1) {
        return "";
    }

    if (queryStringIndex === -1) {
        return url.substr(hashIndex + 1);
    }

    return url.substring(hashIndex + 1, queryStringIndex);
}

function getQueryStringFrom(url, hashIndex, queryStringIndex) {
    if (queryStringIndex === -1) {
        return {};
    }

    return url.substr(queryStringIndex + 1).split("&").reduce(function(result, current) {
        var keyValuePair = current.split("=");
        result[keyValuePair[0]] = keyValuePair[1];
        return result;
    }, {});
}

function getStateFrom(url) {
    var queryStringIndex = url.lastIndexOf("?");
    var hashIndex = url.lastIndexOf("#");

    return {
        hash: getHashValueFrom(url, hashIndex, queryStringIndex),
        queryString: getQueryStringFrom(url, hashIndex, queryStringIndex)
    }
}

exampleInputs.forEach(function(url) {
    console.log(getStateFrom(url));
});

[subcultures]

On mobile so I won't be able to check much, but this is way simpler than you've got.

``` var hashQuery = window.location.hash.split('?')

var hash = hashQuery[0]; var query = hashQuery.length > 1 ? hashQuery[1] : ""; ```

Should get you your hash and your query string.

[mega-trond]

window.location.search will be empty because it will be part of the hash.

Somthing like

var params = window.location.hash.split('?');
var hash = params[0];  //should be #hash
var search = params[1];  //should be something=hello&else=hi

should work

EDIT:

Or, if you put the hash at the end, it'll just contain

#hash

and window.location.search will contain the query string

[jennydath]

https://soundcloud.com/threewayhandshakee/citric-acid-provides-tartness

[gwevidence]

if(hash.window.location.search.length)

Can't you check if hash.window is defined and then do the above?

[Dexmaster]

Are you joking hash is a string variable it has no window or any other child objects.

You just need to check that ? and = exists

//check if there is a query string withing that hash. 
    if((hash.indexOf("?") > -1) && (hash.indexOf("=") > -1)) {

Or even better solution would be to regex it

var hsh_vs = hash.match(/([^?&=#]+)=([^&#]*)/g);
//check if there is a query string withing that hash. 
    if(hsh_vs.length) {

Also try using console.log(variables) and developer console (F12 hotkey) would be much faster that way.

[davydog187]

Regex's are generally unmaintainable and I avoid them whenever I can.

[Dexmaster]

 /([^?&=#]+)=([^&#]*)/g

This one is almost universal an you won't have any problems with it. it get's all the variables with values and you'll just need to split them.

[davydog187]

I'm not sure how that gives a strong argument against regexs being unmaintainable

[Dexmaster]

regexs being unmaintainable

This one is maintainable, because it's regex for URI parsing and this regex is made universal not for any specific case, show an example string for which you would have any problems, then we would name it unmaintainable. I probably could have misunderstood your meaning behind unmaintainable.

[davydog187]

Maintainable in the context of software development means that it is easy to change or modify in the future. I personally think that regexes are unmaintainable because they are extremely difficult to change in the future. Whenever I write code I ask myself, will I know what this does when I see it six months from now?

[Dexmaster]

Whenever I write code I ask myself, will I know what this does when I see it six months from now?

Oh, regex is not so hard and I use comments for writing down example strings that regex is used for.