inconsistent window.history.pushState uri encoding

Question

Take url address www.somesite.com/@user1

If I click on a good old fashioned <a href... hyperlink containing the link then the @ is percent encoded to %40 in the address bar.

If I use html5's window.history.pushstate("object or string", "Title", 'www.somesite.com/@user1') the @ is not endocded - it instead shows as a '@' character.

This inconsistency troubles me. Mayhaps there is a way to make the behaviour consistent?

I have considered encodeURIComponent('www.somesite.com/@user1') for the pushstate url, but this also encodes the '/', and what I am hoping is for the <a href... hyperlink not encode the '@' symbol.

Answer 1

Using encodeURIComponent makes javascript assume there are no special HTTP characters to ignore. extract the compnenet first:

var url = "www.somesite.com/@user1";
var atPos = url.indexOf('@');
var urlComp= url.slice(atPos);  //@user1
url = url.slice(0, atPos);
url += encodeURIComponent(urlComp); //"www.somesite.com/%40user1"