JavaScript encodeURI-decodeURI

This JavaScript article shows you the reason of using encode/decode JavaScript methods for the data; and the solutions for this trouble. Just a little post, but this tutorial is still useful & helpful whether you knew or not.

Sampled by © JavaScriptBank.com

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="").


<?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 encodes a string, so it can be read on all computers.

Source: W3Schools

escape() returns 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

Language

Recent articles
How to open a car sharing service
Vue developer as a vital part of every software team
Vue.js developers: hire them, use them and get ahead of the competition
3 Reasons Why Java is so Popular
Migrate to Angular: why and how you should do it
The Possible Working Methods of Python Ideology
JavaScript Research Paper: 6 Writing Tips to Craft a Masterpiece
Learning How to Make Use of New Marketing Trends
5 Important Elements of an E-commerce Website
How To Create A Successful Prototype For Your PCB

Top view articles
Top 10 Beautiful Christmas Countdown Timers
Adding JavaScript to WordPress Effectively with JavaScript Localization feature
65 Free JavaScript Photo Gallery Solutions
16 Free Code Syntax Highlighters by Javascript For Better Programming
Best Free Linux Web Programming Editors
Top 10 Best JavaScript eBooks that Beginners should Learn
Top 50 Most Addictive and Popular Facebook mini games
More 30 Excellent JavaScript/AJAX based Photo Galleries to Boost your Sites
Top 10 Free Web Chat box Plug-ins and Add-ons
The Ultimate JavaScript Tutorial in Web Design

Free JavaScript Tutorials & Articles

at www.JavaScriptBank.com