When are you supposed to use escape instead of encodeURI / encodeURIComponent?

Breaking it down: encodeURI vs encodeURIComponent

This section dissects the differences between encodeURI and encodeURIComponent by illustrating their use cases, endearing us to their quirks and intricacies.

Handling query strings with special characters

When your URL has a query string replete with special characters, encodeURIComponent comes handy:

var baseURL = "http://example.com/checkout?";
var itemId = encodeURIComponent("item ID"); // item%20ID
baseURL += "itemId=" + itemId;
// http://example.com/checkout?itemId=item%20ID
console.log(baseURL);


With this, your shopping cart query string parameters don't accidentally get mistaken for aisle separators!

Encoding a full URL without creating chaos

When you have an entire URL to encode and you'd prefer to keep URL syntax intact, encodeURI serves such purposes.

var forumPostURL = "http://example.com/forum/post/Hello JavaScript!";
var encodedURL = encodeURI(forumPostURL);
// http://example.com/forum/post/Hello%20JavaScript!
console.log(encodedURL);


Notice encodeURI leaves alone crucial URL components, such as http:// and /forum/?

Practical uses: escape, encodeURI, encodeURIComponent

Let’s explore some real-world scenarios for a better grasp of when and how to use these functions.

Scenario: Sending plaintext

Say you want to send a plaint text as a parameter in your URL, e.g. "Hello, JavaScript!":

• escape: Yields incorrect results for the plus sign (it remains "+") and could potentially cause chaos elsewhere.
• encodeURI: Doesn't encode ? or #, risking URL misinterpretation.
• encodeURIComponent: Safest option, encodes everything barring alphanumerics and - _ . ! ~ * ' ( ).

You could say, when it comes to navigating the turbulent seas of URL syntax, encodeURIComponent is your trusty compass!

Scenario: Embedding URLs

When your URL is supposed to be a query parameter in another URL, use encodeURIComponent.

var innerURL = "http://example.com/checkout?itemId=item ID";
var outerURL = "http://tracker.com?redirect=" + encodeURIComponent(innerURL);
console.log(outerURL);
// http://tracker.com?redirect=http%3A%2F%2Fexample.com%2Fcheckout%3FitemId%3Ditem%20ID


Who said Inception was only a movie? URLs can dream within dreams too!

Navigating the encoded world

Reversing the magic

After encoding, comes decoding - decodeURIComponent is your un-encoder ring for this trick!

var encodedText = "Hello%2C%20JavaScript%21";
console.log(decodeURIComponent(encodedText)); // Hello, JavaScript!


Understanding encoding limits

Different characters have different roles in URL-land. Some are reserved, some are not. Run tests with your encode functions to understand their behaviors.

Conscious encoding

Not all encoding tasks were created equal! A prime example: Cookie values — they're like a whole different ball-game. The takeaway? Always test how your servers handle different encoded inputs.