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:

<?php
var_dump($_GET);?>
<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:

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.

escape:

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.

Source: https://developer.mozilla.org

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

Reference:

https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Functions/encodeURI

http://docs.sun.com/source/816-6408-10/toplev.htm

  • # 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.