Develop Reference

How to remove all URL hashes except first?

Well, on my site I have a FAQ where users can access specific questions through the URL, such that:
https://example.com/faq#question-1
And for this I use Jquery, such that:
if (window.location.hash) {
$(window.location.hash).open();
}
But I want that if the user enters more than one hash in the URL such that:
https://example.com/faq#question-1#question-2#question-3#question-n
All hashes are removed from the URL except the first #question-1
How can I do this?
Edit:
if user type https://example.com/faq#question-1#question-2#question-3#question-n then change the url to https://example.com/faq#question-1 so that only the first hash appears in the url and the FAQ only has to read a single hash.

It could something as simple as
var hash = window.location.hash;
var filtered_hash = '';
if(hash.length > 0){
filtered_hash = '#' + hash.split("#")[1];
window.location.hash = filtered_hash;
}
console.log(filtered_hash);

This should work for you
var str="https://example.com/faq#question-1#question-2#question-3#question-n";
var trimmedStr = str.split("#").slice(0,2).join("#");
console.log(trimmedStr);
This removes all hashes after the first hash.

You can use something like -
location.hash = '#'+location.hash.split('#')[1]

Javascript get url and redirect by adding to it

I have a situation where I need to get the current page url and redirect to a new page by adding to the current page url. For example:
http://www.mywebsite.com/page1/page2
needs to redirect to:
http://www.mywebsite.com/page1/page2/page3
I need it to be relative because "/page1/page2/" will always be different, but "page3" will always be the same.
I've tried: location.href = "./page3"; but that does not work. The result is:
http://www.mywebsite.com/page1/page3
Any thoughts?

Maybe this?:
location.href = location.pathname + "/page3";

Get and Set URL using either window.location.href or document.URL;
window.location.href = window.location.href + "/page3";
Should do what you're looking for.

how to get the full path of a page in javascript

I know that var pathname = window.location.pathname; returns path only and var url = window.location.href; returns full URL.
Now suppose i have page MyPageName.aspx in the root of my site and my site can be deployed on servers serverone, servertwo & serverthree.
On Serverone, i want to display http://example.com/MyPageName.aspx
On servertwo, i want to display http://example.net/MyPageName.aspx
On serverthree, i want to display http://example.org/MyPageName.aspx
So how do i get the full URL path of a page in i'ts current environment with out browising to that page but knowing in advance that the page exists.
I want to display the URL some where on a master page.

You can use window.location.origin to return everything up to and including the .com:
var url = window.location.origin;
-> "http://example.com"
As MyPageName.aspx appears to be static, you can then just use string concatenation to append it to the end:
url += "/MyPageName.aspx";
-> "http://example.com/MyPageName.aspx"
Demo
var url = window.location.origin + "/MyPageName.aspx";
document.write(url);

Did you try
document.URL
read http://www.w3schools.com/jsref/prop_doc_url.asp

Clear the # without reloading the page

I am loading all website's pages into the main index page, and updating URL display by splitting the href into segments and adding the segments after the main domain name with .hash function, like this:
$('a').click(function(event) {
event.preventDefault();
var my_url = this.href;
var pathArray = this.href.split('/');
var newPathname = "";
for ( i = 3; i < pathArray.length; i++ ) {
newPathname += "/";
newPathname += pathArray[i];
}
$('body').load(my_url);
window.location.hash = newPathname;
This works okay, but I'm facing a little problem. When a user accesses http://www.mywebsite.com/ and then clicks, for example, on "About" link, the selected page loads, and the address bar displays:
http://www.mywebsite.com/#/about
But if a user starts with a different page:
http://www.mywebsite.com/#/about
Then after the click, the url becomes:
http://www.mywebsite.com/#/about/#/about
and so on, to infinity.
How can this be solved?
Perhaps there's a way to clear the hash and then display the new hash (that is, remove everything that starts with #/ and then add the new hash) – or maybe there's a better solution?

Try var my_url = this.href.replace(/#.*/,'')
This will remove the # and anything after it.

If you want to split just the path component of the current URL, then don’t use
var pathArray = this.href.split('/');
because href will contain the full path including the hash.
Use
var pathArray = this.pathname.split('/');
instead.

Changing the hash doesn't refresh your page. At most it forces the browser to scroll top. If you want you can do:
window.location.hash = "";
to empty it (retaining the #) if you also remove the #from the href then your page will always reload.

Removing # from fragment identifier

I try to remove the '#' from the url after removing the fragment identifier.
For example:
var myUrl = location.href; // example.com/#abc
alert(location.hash); // #abc
location.hash = '';
alert(myUrl); // example.com/#
Now i try to remove the # WITHOUT a page reload. I tried to use the replace function but when i try to remove the '#' the page will reload. Is there a solution to solve this ?

You should use HTML5 History API for this: http://diveintohtml5.info/history.html
You won't be using hashes anymore, but you can still load pages without reloading.

Look at this questions:
How to remove the hash from window.location with JavaScript without
page refresh?
Remove hash from url