Encoding Web Addresses
There are certain characters that have special meanings when you include them in a web address. Characters such as / which separates up the protocol, domain name, folders, and file name, : which is also used to separate the protocol from the rest of the address and the separate the username from the password, @ which separates the username/password from the domain name, ? which separates the web page from the query string, # which separates the anchor within the page from the rest of the address, and spaces which separate a web address from the surrounding content. There are also characters which are invalid in web addresses and which cannot be included in an address at all.
Of course there may be times when you need to include invalid characters in the address or special characters where you do not want to have the special meaning applied (where it is a part of the content rather than defining where the parts of the content of the address start and end. To handle this web addresses give a special meaning to the % character which is used to "encode" those parts of the address which would have special meanings if they were not encoded.
You could of course encode the addresses you want to use in your web page manually but doing that means that you might easily make a mistake in the encoding either in what code you use for a given character or even in working out which characters need to be encoded and which ones don't. There is a better solution though using JavaScript as JavaScript contains not just one but two functions that will do the entire job for you in the one function call.
encodeURI() will encode an entire web address. It knows which characters have special meanings and will not encode those characters, it just encodes those characters which are not valid when included within a web address without encoding them. encodeURIComponent() assumes that you are trying to encode some content that is to be placed within a web address as content and it will not only encode all the invalid characters but will also encode all those with special meanings as well. The resultant encoded string from this second function can then be assembled with the rest of the parts of the address.
Where you are creating the address from JavaScript in the first place you can easily use one of these functions within your code to do the encoding as a part of that processing. That doesn't help much though if you just want an encoded address to insert directly into your HTML. You will not need to hand encode your static web addresses though because the following two forms can be used to do the encoding for you. Simply enter a complete web address to be encoded into the following form and all of the characters that are not allowed in a web address will be encoded for you. You can then simply copy and paste the encoded value into your web page.
If you need to use characters in the content which would normally have a special meaning then you need to do a little more work. You will need to extract the part of the address that needs to be encoded and use the following form to encode just that part of the address. Once it is encoded you can then paste it back in place of the original part of the address leaving the rest of the address alone (or encoding other parts separately as required).
These encode functions (and the matching decode functions) are not limited to web addresses. They can be used anywhere that you need to encode your content to avoid confusion with special and invalid characters. The encodeURIComponent() function is a replacement for the now deprecated escape() function and does just about exactly the same thing except for the fact that escape only encodes ASCII characters whereas encideURIComponent encodes Unicode characters. Since the ASCII characters are identical to the first 128 Unicide characters you can simply replace all your references to escape() and expand the range of characters that can be correctly handled to cover all possibilities.
