Javascript and encoding

As a developer of web applications you (should) know that your users will not always enter the data you expect in a form field. When you post the form with a normal submit, then the browser will take care of the encoding for you, but what about AJAX calls? Say, you need to grab a form value and need to pass it on in a AJAX call, then you need to take care of the encoding.

Javascript gives you 3 functions to encode your values. These are escape(), escapeURI() and encodeURIComponent(). Now, probably like a lot of others, I have only known about the escape() function and used to use that function to encode my URL values. Until the other day, when I had to preserve a “+” and a “/” in a value. Apparently, there is a fundamental difference between them.

escape:

In all browsers that support JavaScript, you can use the escape function. This function works as follows: digits, Latin letters and the characters + – * / . _ @ remain unchanged; all other characters in the original string are replaced by escape-sequences %XX, where XX is the ASCII code of the original character.

escapeURI & encodeURIComponent

In addition to escape, modern browsers support two more functions for URL-encoding: encodeURI and encodeURIComponent. These functions are similar to escape, except that they leave intact some characters that escape encodes (e.g. apostrophe, tilde, parentheses); moreover, encodeURIComponent encodes some characters (+ / @) that escape leaves intact. Unlike escape, that produces %uXXXX, encodeURI and encodeURIComponent will encode the capital Cyrillic letter A as %D0%90, and the euro sign (€) as %E2%82%AC.