JavaScript retrieve string after hash

Question

I am trying to find the string after the my hash sign so when the user reloads the page I can just look at that string and then load the correct page dynamically. My url looks like this http://mysite.com/#!/account/. How do I retrieve just the /account/? I have tried using this:

var oldLoc = window.location,
patt = /#!(.+)/,
newLoc = oldLoc.match(patt)[1]; // This returns `/account/settings`

if (newLoc == '' || newLoc == '#!/' || newLoc == '/#!' || newLoc == '/#!/') {
    $('#reload_section').load('main.php');
} else if (newLoc == '/newsfeed/') {
    $('#reload_section').load('newsfeed.php');
} else if (newLoc == '/account/') {
    $('#reload_section').load('account.php');
} else if (newLoc == '/search/') {
    $('#reload_section').load('ajaxsearch.php');
}

This works fine if I put a value like http://mysite.com/#!/account/ inside the oldLoc variable but if I put what I have it gives me this error:

TypeError: 'undefined' is not a function (evaluating 'oldLoc.match(patt)')

1)Why doesn't this work, I have tried all different combinations window.location, document.location, nothing works.
2) Is there an easier way to find what the hash is of the page and then load the correct page as shown above?

Thanks!

I've rolled back your edit; solutions should be posted as answers to the question, not as part of the question. — Cloudy
– Cloudy, Commented Apr 4, 2013 at 18:49

wecsam · Accepted Answer · 2012-02-15 04:05:44Z

4

Use window.location.hash. For the URL http://mysite.com/#!/account/, it will return #!/account/. Now, simply take the #! off of the front with a regular expression:

window.location.hash.replace(/^#\!/,"")

The above code will give you /account/.

EDIT: You could also use this:

window.location.hash.substring(2)

answered Feb 15, 2012 at 4:05

wecsam

2,7814 gold badges28 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Joe Torraca Over a year ago

Thank you so much, the window.location.hash.replace(/^#\!/, "") worked perfect!

wecsam Over a year ago

You're welcome. The pitfall with using substring(2) was that the first two characters would be removed regardless of what they were.

trainoasis Over a year ago

This retrieves hash after browser hash url, not from any string what the question at first suggests :)

Kevin · Accepted Answer · 2012-02-15 04:00:41Z

3

you can use

window.location.hash

answered Feb 15, 2012 at 4:00

Kevin

1,14711 silver badges21 bronze badges

4 Comments

Purag Over a year ago

It would give you the latter.

Joe Torraca Over a year ago

Ok, is there any way to remove the #! and just end up with '/account' if not it is ok this way.

wecsam Over a year ago

Yeah, there is, as I explained in my answer below. Use window.location.hash.substring(2), which will take the #! off of the front.

Kevin Over a year ago

what it give is totally a string, so you can use: location.hash.substring(2); and you should tell if the string's length is > 2, or it would throw an exception.

kevinAlbs · Accepted Answer · 2012-02-15 04:02:53Z

1

The window.location object has a hash property which contains everything after (and including) the has symbol. To get everything after the #, take off the leading hash symbol:

window.location.hash.substring(1)

answered Feb 15, 2012 at 4:02

kevinAlbs

1,1242 gold badges11 silver badges20 bronze badges

2 Comments

Joe Torraca Over a year ago

This would give me /account/?

kevinAlbs Over a year ago

No this would give !/account/ If you wanted to remove the exclamation point, change the 1 to 2. This removes the subsequent character.

swaggler · Accepted Answer · 2012-02-15 04:04:27Z

1

Also consider taking a look at some JavaScript routing libraries like,

Crossroads.js (only routing)
Backbone.js (provides general client-side app structure which includes a helpful router with pushState support)

answered Feb 15, 2012 at 4:04

swaggler

5832 gold badges5 silver badges13 bronze badges

Comments

declan · Accepted Answer · 2012-02-15 04:04:54Z

1

You might try taking a look at the Crossroads and Hasher libraries. You can put them together to do what I think you're trying to do.

// setup your routes
crossroads.addRoute('newsfeed.php', function() {
    // do some stuff
});

//setup hasher
hasher.initialized.add(crossroads.parse, crossroads); //parse initial hash
hasher.changed.add(crossroads.parse, crossroads); //parse hash changes
hasher.init(); //start listening for history change

answered Feb 15, 2012 at 4:04

declan

5,6453 gold badges41 silver badges43 bronze badges

Collectives™ on Stack Overflow

JavaScript retrieve string after hash

5 Answers 5

3 Comments

4 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

4 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related