taking the # out of url on location.hash

Question

function updateView(category) {
  console.log( window.location.hash );
  if (location.hash !== ""){
    //convert #3 to 3.
    //load video based on id
    //myArray[sanitizedHash];

  } else {

    updateCategoryLabel(category);
    currentList = updateVideosList(category);
    chooseRandomVideoFromList();
  }
}

This function is loaded on page load

How can I parse inside this function so that the the location.hash's '#' will be taken out of the URL?

In short I am trying to achieve www.mysite.com/3 versus www.mysite.com/#3

Thanks in advance!

Edit: I should add that the 'else' is basically randomizing on page load versus going to the direct url. This if statement will run on page load to check if the hash exists otherwise it will randomize as usual.

tabz100 · Answer 1 · 2015-01-19T20:58:42.307

2

You can get the window.location.hash and then replace the # with an empty string

 if (location.hash !== ""){
  var sanitizedHash =  window.location.hash.replace("#", "");
  //load video based on id
  //myArray[sanitizedHash];

  }

edited Jan 19 '15 at 20:58

answered Jan 19 '15 at 20:53

tabz100

1,463
11
14

score 2 · Accepted Answer · edited Jun 04 '15 at 13:35

2

Altering the URL from 'www.mysite.com/#3' to 'www.mysite.com/3' will cause the browser to navigate to a new URL since www.mysite.com/3 is not the same page as www.mysite.com/#whatever.

If you just want a string with the first character of the hash trimmed try:

window.location.hash.substr(1)

edited Jun 04 '15 at 13:35

Eric Leschinski

146,994
96
417
335

answered Jan 19 '15 at 20:54

stealthwang

915
6
8

In conjunction, you might want to look at using .htaccess to redirect and mask `http://example.com/someID` to `http://example.com/?someID` so that you can use PHP to get the video ID without having to generate a new page for every single one. You would just have a single index.php page that would load the video based on the contents of `array_keys($_GET)`. **This also has the benefit of not requiring JavaScript from your users.** – Liftoff Jan 19 '15 at 20:57
Yeah, that's what I thought. But to my understanding window.location.hash seems to 'append' a hashtag - "#" to whatever hash value comes out. What I am asking is how I can keep that value that is generated from the hash, but remove the hash tag from the output. If that makes sense.. – h0bb5 Jan 19 '15 at 20:57
In that case, you can just trim the first character of window.location.hash. I've added this to my answer. – stealthwang Jan 19 '15 at 20:59
@h0bb5 In short, you can't. However, you can modify the URL without reloading the page by [pushing the browser history](http://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page); but this is not supported in IE9-. I would seriously consider doing this server-side, as it is a lot cleaner and won't require JS from your users, and then when people navigate to your URLs directly, they will actually load what they want it to load. Because the way that you are doing it, if someone types in `example.com/3`, it will not take them to example.com/#3 and redirect them. 404 :( – Liftoff Jan 19 '15 at 21:02
hmm, okay yeah, I guess I can see how it could be more difficult. I dont know, I was really trying to figure out how to have the url change when a new image/video is randomized but the rest of the page would stay static. What would you recommend as the best approach for doing this server sided? – h0bb5 Jan 20 '15 at 01:17

score 0 · Answer 3 · answered Jan 19 '15 at 21:16

If your goal is NOT to trigger page load, you can use HTML5 History API to change URL from www.mysite.com/#3 to www.mysite.com/3 like that:

var id = location.hash.substr(1);
history.replaceState({id:id}, id, id);

Note that replaceState is used, because otherwise user can press back button to the browser and get back to the #3. If you want to allow that, replace replaceState with pushState. Hope that helps.

taking the # out of url on location.hash

3 Answers3