Parsing urls with hash symbols

[Chris Lowles]

Hello CSS-Tricks, Chris here.

I was just wondering if parsing a url with multiple hashes is possible, I’m trying to create a hash-symbol based system and I was needing to make something like this:

http://www.example.com/#function1#function2#function3

Different hashes execute different functions and enable some sort of customization is what I’m aiming for, but I am clueless at making this possible.

While I may be able to do individual and singular hash-symbol based responses, I don’t know how to make an array and having it working like normal.

Sorry if I was blurry in this post, anyway I made a pen here, for anyone to inspect if you know what I need to do.

[Chromawoods]

Why do you want to use hashes instead of query string params?

[noahgelman]

@Chromawoods, not relevant.

@Chris Lowles, here’s an option:

// Get the full url
var url = window.location.href;

// Using the url we create an array of values split by the #. Google 'javascript split' if you don't understand
var hashes = url.split('#');

// Check if the array is bigger 1 value. If there is no # the array will be 1 in length and it will just be equal to the url
if(hashes.length > 1) {

  // Typical For loop. We start at 1 and not 0 since the array length starts counting at 1 but the array counts positions starting at 0
  for (var i = 1; i < hashes.length; i++) {

  // Run the function. We run the # value through the window to grab the function. This is a bit harder to explain so just take my word for it
  window[hashes[i]]();

  }

}

I should run even if placed inside a jquery $(document).ready(). Let me know if if doesn’t.

[Chromawoods]

@noahgelman lol. I was not criticizing his choice – I was just curious. No harm in that, I believe. I haven’t really come across this scenario before so that is why I asked.

[nkrisc]

@noahgelman It’s a perfect valid question he asked. He didn’t say, “Why do you want to use hashes instead of query string params? That’s stupid” he simply asked a question.

[Chris Lowles]

Just updated the pen, would this work?

[Chris Lowles]

Wait scratch that, its working thanks!!!

[Taufik Nurrohman]

Why don’t you use this format:

http://www.example.com/#function1&function2&function3

and…

var fn = window.location.hash.replace('#', "").split('&');

if(fn.length) {
    for (var i = 0; i < fn.length; i++) {
        window[fn[i]]();
    }
}

[Author]

Posts