JavaScript Encode-Decode URL

Why url encoding needed?

All NON-ASCII characters need to be converted to %xx value for a url.
Spaces and special characters can break the url.
Something like "encoding_test.php?q=hello world" need to converted into "firstpage.php?q=hello%20world".
Most modern browser do this job most of the time. So, we do not face much problem. But this can be a necessity
when some other application is consuming data through URL.

For security reason, escaping the string is required.

Sometimes we need to pass special characters like '&' (ampersand) in query string. '&' is used for separating Key=Value pair. So, if I need to pass
?q=PHP&MySQL then q=PHP and MySQL be a single key without any value (MySQL="").

A Test:
Copy the below code and see the output:

<a href="javascript:location='encodeTest.php?q=' + encodeURIComponent('PHP&MySQL')"> url component encoding</a><a href="?q=PHP&MySQL">TEST url encoding </a>


URL Encode and Decode

encodeURI() replaces all characters with the appropriate UTF-8 escape sequences, except the following:
; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #

URL Decode

encodeURI() has a decodeURI() for decoding encodeURI() encoded url string.


encodeURIComponent escapes all characters except the following: alphabetic, decimal digits, - _ . ! ~ * ' ( )
Use this function for encoding url components (key=value) and not for whole url encoding.
and this function is required to be used to escape any data taken from users and passed to the server for security reason.


The escape() function return result in ISO-Latin-1 character set and not the unicode.

The escape() function encodes spaces, punctuation, and any other character that is not an ASCII alphanumeric character, with the exception of: * @ - _ + . /

Escape() has unescape() function to get the original encoded html using escape() function.
unescape returns the ASCII string.

The escape and unescape functions do not work properly for non-ASCII characters and have been deprecated. In JavaScript 1.5 and later, use encodeURI, decodeURI, encodeURIComponent, and decodeURIComponent.


Sample of encoding effect:
Original: "<script>alert('a')</script>"
%3Cscript%3Ealert%28%27a%27%29%3C/script%3E - escape
%3Cscript%3Ealert('a')%3C/script%3E - encodeURI
%3Cscript%3Ealert('a')%3C%2Fscript%3E - encodeURIComponent


  • # 1 - by Uleameth

    I want to say – thank you for this!,

Comment pages
1 2 346
Comments are open for an year period. Please, write here on Facebook page.