JavaScript

What is encodeURI() in JavaScript

URI” or “Uniform Resource Identifier” identifies a resource and describes how to access it. In JavaScript, “URLs” or “Uniform Resource Locators” can only contain the characters from ASCII 128 standard characters set. Therefore, reserved words must be encoded if they are not part of the set before passing them into the URL.

For example, the user has filled out a form with data in string format, which must be handled URL. In such a scenario, you can utilize the JavaScript “encodeURI()” function to encode the string value.

This write-up will discuss the usage of the encodeURI() method in JavaScript. So, let’s start!

What is encodeURI() in JavaScript

The “encodeURI()” function encodes the specified URI by replacing the string characters with the escape sequences in JavaScript. For instance, the “encodeURI()” function substitutes the space character “ “ of a string as a percent 20: “%20”.

However, there also exist some characters that cannot be encoded and have been left as is it. These characters include:

  • Alphabets both lowercase and uppercase
  • Digits from 0 to 9
  • Other special characters such as # ; () , ’ / * ? ~ : ! @ . & _ = – $ +

Now, let’s check out the syntax of the “encodeURI()” function in JavaScript.

Syntax

encodeURI(uri)

Here, the “encodeURI()” function accepts the “uri” as an argument and returns the respective encoded URI.

Example
The JavaScript “encodeURI()” function can be utilized to encode a URI that comprises some spaces. For instance, in the below-given example, we will pass the URI “https://linuxhint.com/ javascript clear console ” to the “encodeURI()” function:

var encodedURI= encodeURI("https://linuxhint.com/ javascript clear console ");
console.log("The encoded URI is: "+ encodedURI);

Execution of the specified “encodeURI()” function will return the following encoded URI:

Difference between encodeURI() and encodeURIComponent() functions

Beginners often get confused between the “encodeURI()” and “encodeURIComponent()” functions and think that both functions are used for the same purpose; however, that’s not the case.

The JavaScript “encodeURI()” function is used when the string needs to be encoded as a whole URL, whereas the “encodeURIComponent()” function only encodes the section of a URL such as a “query string”. As a result, the number of characters replaced by escape sequences exceeds that of the “encodeURI()” function.

Check out the below-given example for using the “encodeURIComponent()” function in JavaScript.

Example
In a situation where it is required to build a URL from a string, the “encodeURIcomponent()” function is used to encode the query string parameters. After that, you can concatenate the encoded URI to the other part to form a URL:

var x = encodeURIComponent(' javascript ')
var url = "http://linuxhint.com/?search=" + x + "&length=34";
console.log("New URL is: "+ url);

The given output signifies that with the help of the “encodeURIcomponent()” function, the string “ javascript ” is converted to its encoded version, and then it becomes a part of the “url” variable by utilizing the concatenation operator “+”:

Why you should use encodeURI() function in JavaScript

The usage of the “encodeURI()” function offers the following benefits:

  • The “encodeURI()” function permits the JavaScript developers to encode the specified URIs with simplicity and ease since it assists in encoding the whole set of characters at once, and returns the corresponding string value.
  • Most modern browsers are compatible with different versions of the “encodeURI()” function, so you can use these functions without any hassle.

That was all essential information related to JavaScript encodeURI() function. You can further research it according to your requirements.

Conclusion

In JavaScript, the “encodeURI()” function encodes the specified URI by replacing the string characters with the escape sequences. For instance, the “encodeURI()” function substitutes the space character “ “ of a string as a percent 20: “%20”. It accepts the “uri” as an argument and returns the respective encoded URI. This write-up discussed the usage of the encodeURI() in JavaScript with the help of suitable examples.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.