To encodeURI or to encodeURIComponent?

Solved a bug today whilst encoding in JavaScript a URL that contained a certain special character: the hash character #.

I found a generated querystring was not working correctly because many of the params were not being passed to the server somehow. I was generating a link like so: var link = 'http://www.britishdeveloper.co.uk?link=' + encodeURI(url) + '&userID=232';

I was quite pleased with myself remembering to URL Encode params that are going into a querystring to get around special characters but I had not thought of something... the hash character #!

Say the url being placed in the querystring is '/my page.aspx#comment3' my link was coming out as http://www.britishdeveloper.co.uk?link=/my%20page.aspx#comment3&userID=232.

What's wrong with that?

Well it's not what I was expecting really but it was working up until I got urls with hashes in. As you may or may not know everything proceeding a # in a url is for browsers so your server will ignore everything after it. In this case the userID param was not seen by my server.

encodeURIComponent not encodeURI

For this particular scenario encodeURIComponent was what I needed since:

encodeURI('/my page.aspx#comment3')
//output: /my%20page.aspx#comment2

encodeURIComponent('/my page.aspx#comment3')
//output: %2Fmy%20page.aspx%23comment2

encodeURI is for encoding non-URI special characters from a string so the above example of encodeURI would have been great for appending it like so 'http://www.britishdeveloper.co.uk' + encodeURI(url)

encodeURIComponent is for encoding a string to be fit for a querystring param where characters such as . and # shouldn't really be included as in my above example.

So know your Javascript encoding!