A URL consists of many characters, both special and unique. Unique characters include those that are not plain standard such as spaces etc. So it means that we need to encode characters in UTF-8. So if we have a string such as: “https://www.gfg.com/what is html?” then UTF-8 will encode it as “https://www.gfg.com/what%20is%20html“.
encodeURI() and encodeURIComponent() are different functions where the former is supposed to encode the URL while the latter helps to encode a URI component. The escape() function in javascript works in a similar manner. We pass it a string as a parameter and it encodes characters with escape sequences. These escape sequences are UTF-16 encoded where every character is at least 2 bytes in representation (code units).
The escape() may be used when characters such as apostrophes, tilde, and parenthesis are also supposed to be encoded. These special characters are not encoded in both encodeURI() and encodeURIComponent(). If let’s say that you have a REST API that does not allow such characters to be present in the URL and may cause errors, then it may be desirable to use escape() to make sure that the query string passed does not contain these exceptional cases.
Syntax: The syntax for escape() is:
escape(uri)
In a similar manner, encodeURI():
encodeURI(uri)
and for encodeURIComponent():
encodeURIComponent(uri);
The escape() function is now depreciated. It is advised to switch over to encodeURI() and encodeURIComponent(). This function may only be used if previous compatibility exists and a change would result in errors and issues.
Example 1: In this example, we pass a query string in all three functions to notice the differences in their outputs.
HTML
<!DOCTYPE html> <html> <body> <p id="escape">out_1</p> <p id="encodeURI">out_2</p> <p id="encodeURIComponent">out_3</p> <script> document.getElementById("escape") .innerHTML = escape( "https://www.url.com/i+am)alive"); document.getElementById("encodeURI") .innerHTML = encodeURI( "https://www.url.com/i+am)alive"); document.getElementById("encodeURIComponent") .innerHTML = encodeURIComponent( "https://www.url.com/i+am)alive"); </script> </body> </html> |
Output:
When are you supposed to use escape instead of encodeURI / encodeURIComponent?
You can now see that the extra parenthesis after ‘m’ in the original URL is encoded in the escape() function as ‘%29‘ but remains unchanged in both encodeURI() and encodeURIComponent().
escape() can also be used when a Unicode string is supposed to be encoded in the format as ‘%uxxxx‘. This is entirely dependent on the user’s needs, where a custom syntax like this one may be allowed. This is achieved by the latter encodeURI() and encodeURIComponent() functions.
Example: Here, we will now pass another query string with the character ё.
HTML
<!DOCTYPE html> <html> <body> <p id="escape">out_1</p> <p id="encodeURI">out_2</p> <p id="encodeURIComponent">out_3</p> <script> document.getElementById("escape") .innerHTML = escape( "https://www.url.com/i+am)alive"); document.getElementById("encodeURI") .innerHTML = encodeURI( "https://www.url.com/i+am)alive"); document.getElementById("encodeURIComponent") .innerHTML = encodeURIComponent( "https://www.url.com/i+am)alive"); </script> </body> </html> |
Output:
When are you supposed to use escape instead of encodeURI / encodeURIComponent?
Here we can see that the character ё is encoded as %u0451 in the escape() function and as %D1%91 in the latter functions.
Overall, escape() is now rarely used and it is recommended to go for encodeURI() and encodeURIComponent(). Both of these functions can be called as desired. escape() is depreciated and its usage must be avoided.
