encodeURI() in JavaScript

JavaScript encodeURI definition

The URI function in JavaScript is capable of encoding any Uniform Resource Identifier (URI) by substituting particular character occurrences with one, two, or three escape sequences that correspond to UTF-8 patterns. This function serves the purpose of encoding special characters in URIs, as well as reserved characters that signal certain exceptions. For instance, characters such as ; / ? @ & = + $ are followed by another category of character exceptions, which includes unescaped characters that consist of decimal digits along with alphabetical characters, as well as - _ ! ~ * ' and a numerical value representing the score.

Syntax:

encodeURI(uri)

When the encodeURI function is invoked, it encodes a URI utilizing a specific syntax that has been established. The required argument, URI, signifies the exact URI that is intended for encoding.

How does JavaScript's encodeURI function operate?

Let's examine how the JavaScript encodeURI function operates:

• ✅ By replacing the original characters in URIs with escape sequences, the encodeURI function in JavaScript can encode characters. As part of this, three character categories will be encoded.
• ✅ The parameter URI, which denotes the URI it is pointing to and streamlines and customizes the URI flow, is part of the encodeURI syntax flow.
• ✅ An encoded URI can be decoded using JavaScript's decodeURI function. By returning escape sequences in the encoded URI to their original characters, it carries out the opposite operation of the encodeURI function. It accepts an encoded URI as input and outputs a decoded URI.
• ✅ When it comes to browser support, the encodeURI(URI) function with the parameter has fairly flexible compatibility.
• ✅ Furthermore, any URI-based component that uses encodeURIComponent, including encodeURI and functions that contain URI components.
• ✅ The use of encodeURI(URI) and encodeURIComponent(URI) functions according to requirements is related.
• ✅ JavaScript's constant complexity results from its minimal manipulation and modification. Rather, the time complexity of this is constant since it returns the value string as a return type.
• ✅ These functions all aim to encode the strings so that the set is portable and transmittable across networks or computer systems that support special characters with ASCII values.
• ✅ However, all of these functions share some common functionality, such as the ability to encode URI and encodingURIComponent in a way that uses characters, with the possible exception of reserved, unescaped, and score characters.
• ✅ While the working flow may be considered the same as for other functions, there are some differences with the JavaScript encodingURI and encodingURI components.

What distinguishes a URI from a URL, and what does it mean?

The abbreviation for Uniform Resource Identifier is URI. Conversely, the term Uniform Resource Locator is referred to as URL. A resource's distinct identifier (URI), which may be its ISBN, id, or name, serves as a means of identifying that resource. In contrast, a resource's URL specifies how it can be accessed (the protocol). While every URL qualifies as a URI, not every URI is classified as a URL. Another JavaScript function, EncodeURIComponent, operates in a similar manner. If one is unfamiliar with the distinctions, it can be challenging to determine which function to utilize.

Why is encoding necessary?

In URLs, only a specific subset of the standard 128-character ASCII character set is permitted. Any reserved characters that fall outside this subset must be encoded appropriately.

This indicates that when including these characters in a URL, it is necessary to encode them. Distinct characters such as &, space, and ! must be properly escaped when incorporated into a URL to prevent unforeseen results.

Use cases:

The user has inputted values into various form fields, including URL fields, which might require these values to be transferred in a string format.

In order to perform GET requests, it is essential to accommodate query string parameters.

What distinguishes encodeURI from encodeURIComponent?

The functions encodeURI and encodeURIComponent serve the purpose of encoding Uniform Resource Identifiers (URIs) by replacing a character's UTF-8 representation with one, two, three, or four escape sequences.

A URI Component, which refers to a string that is meant to be included within a URL, ought to be encoded utilizing the encodeURIComponent function.

Utilize the encodeURI function to encode a URI or a pre-existing URL.

Which characters are encryptable?

• ✅ ~!@#$&*=:/,;?+' will not be encoded by encodeURI.
• ✅ You cannot encode ~!*' with encodeURIComponent.
• ✅ From A to Z, a-z, 0 to 9, _. ! and also there is no escape for ~* '.

Example

Code:

<!DOCTYPE html>
<html>
<body>
<h2>Example for encodeURI() Method</h2>
<p id="demo"></p>
<script>
let uri = "https:// www.twitter. com";
let encoded = encodeURI(uri);
document.getElementById("demo").innerHTML = encoded;
</script>
</body>
</html>

Output:

Example for JavaScript encodeURIComponent

Code:

<!DOCTYPE html>
<html>
<body>
<h2>Example for encodeURIComponent() Method</h2>
<p id="demo"></p>
<script>
let uri = "https:// www.twitter. com";
let encoded = encodeURIComponent(uri);
document.getElementById("demo").innerHTML = encoded;
</script>
</body>
</html>

Output:

Benefits

The encodeURI feature provides several advantages, akin to those found in other functionalities:

• ✅ Developers can efficiently and effortlessly encode URIs (Uniform Resource Identifiers) using the encodeURI method. This function aids in encoding all characters within the URI, yielding a string representation of the encoded output.
• ✅ It ensures compatibility across multiple browsers that support different iterations of the URI encoding function.

In summary

Unlike other functions that convert a sequence of characters, the encodeURI function provides a straightforward and efficient method for encoding a URI, ultimately presenting the user with the final output. This functionality streamlines the character reading experience and facilitates implementation for users. Moreover, the alternative methods currently available share a high degree of similarity and compatibility, necessitating minimal adjustments for URI encoding.