When we use Escape Instead of encodeURI / encodeURIComponent in JavaScript ?
Last Updated :
26 Apr, 2023
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.
Similar Reads
Difference between decodeURIComponent() and decodeURI() functions in JavaScript
Both decodeURI() and decodeURIComponent() are Javascript global functions that are used for decoding encoded URI (Uniform Resource Identifier). JavaScript decodeURI() function: It decodes a string previously encoded by the encodeURI() function. It returns a decoded URI by replacing each UTF-8 escape
2 min read
Difference Between encodeURI and encodeURIComponent in JavaScript
The encodeURI and encodeURIComponent functions are used to encode a URI by transforming characters that could otherwise cause issues when included in a URI. While both functions are used for encoding, they serve different purposes and encode different sets of characters. Understanding the difference
2 min read
What are the encodeURI() and decodeURI() in JavaScript ?
URLs and URIs are designed to locate/identify resources available over the internet, anything that uniquely identifies a resource is its URI, such as id, name. A URL specifies a resource and its access protocol. All URLs are URIs, but not all URIs are URLs. URI can only have certain characters from
3 min read
Difference between unescape() and escape() functions in JavaScript
In this article, we will learn about the escape() & unescape() functions in JavaScript. We will understand the purpose of using both these functions through the example. Later in this article, we will discuss the difference between escape() & unescape() functions. Let's discuss the escape()
4 min read
JavaScript encodeURI(), decodeURI() and its components Functions
The encodeURI() and decodeURI() functions in JavaScript are used to handle URI (Uniform Resource Identifier) encoding and decoding. They ensure that URIs are properly formatted for web usage, converting characters that may cause issues into a valid, encoded format.1. encodeURI() FunctionThe encodeUR
2 min read
What is the Role of Ignoring Case RegExp in JavaScript ?
In JavaScript, we use regular expressions to search and manipulate text. Among those one of the good features of regular expressions is the ability to ignore case sensitivity. Case sensitive means differentiating between capital and lower-case letters. This means that when searching for a pattern, y
3 min read
How to Encode and Decode a URL in JavaScript?
Encoding and decoding URLs in JavaScript is essential for web development, especially when making GET requests with query parameters. This process ensures special characters in URLs are correctly interpreted by the server. For instance, spaces are converted to %20 or + in URLs. This guide covers how
4 min read
How to Convert Integer to Its Character Equivalent in JavaScript?
In this article, we will see how to convert an integer to its character equivalent using JavaScript. Method Used: fromCharCode()This method is used to create a string from a given sequence of Unicode (Ascii is the part of Unicode). This method returns a string, not a string object. JavaScript let s
2 min read
What is the Disadvantage of using innerHTML in JavaScript ?
The innerHTML property is a part of the Document Object Model (DOM) that is used to set or return the HTML content of an element. Where the return value represents the text content of the HTML element. It allows JavaScript code to manipulate a website being displayed. More specifically, it sets or r
3 min read
How to execute a function when its name as a string in JavaScript ?
To execute a function when its name is a string in JavaScript, we have multiple approaches. In this article, we are going to learn how to execute a function when its name is a string in JavaScript. Example: function myFunction() { ...}const functionName ="myFunction";Below are the approaches used to
3 min read