AppDividend
Latest Code Tutorials

Javascript encodeURIComponent Function Example

1

Javascript encodeURIComponent() is an inbuilt function that encodes the Uniform Resource Identifier (URI) component by replacing each instance of certain characters by one, two, three, or four escape sequences representing a UTF-8 encoding of the character.

The new string representing the provided string encoded as the Uniform Resource Identifier (URI) component.

Javascript encodeURIComponent Function

It returns a new string representing the provided string encoded as a Uniform Resource Identifier (URI) component. The syntax of encodeURIComponent is the following.

encodeURIComponent(str)

It takes the required argument that is str. It is the component of the URI.

The encodeURIComponent escapes all the character except A-Z a-z 0-9 – _ . ! ~ * ‘ ( ).

The encodeURI differs from encodeURIComponent.

Let’s encode the reserved characters.

// app.js

let ex1 = ";,/?:@&=+$"

console.log(encodeURIComponent(ex1))

The output is the following.

Javascript encodeURIComponent Function Tutorial With Example

Okay, now let’s see the unescaped characters.

// app.js

let ex2 = "-_.!~*'()"
console.log(encodeURIComponent(ex2))

See the output.

Javascript encodeURIComponent Function

Now, let’s encode the number sign. See the following example.

// app.js

let ex3 = "#"
console.log(encodeURIComponent(ex3))

The output is the following.

encodeURIComponent

Also, we can encode the Alpha Numeric characters plus space. See the following example.

// app.js

let ex4 = "AppDividend appdividend 21"
console.log(encodeURIComponent(ex4))

The output is the following.

Javascript encodeURIComponent

Use encodeURIComponent on user-entered fields from forms POST’d to the server.

This will encode “&” symbols that may inadvertently be generated during data entry for individual HTML entities or other characters that require encoding/decoding.

#What should I use encodeURI or encodeURIComponent for encoding URLs?

It depends on what you want to do basically.

Javascript encodeURI assumes that the input is a complete URI that might have some characters which need encoding in it.

Javascript encodeURIComponent will encode everything with special meaning, so you use it for components of URIs such as the following.

If you’re encoding the string to put in the URL component (a querystring parameter), you should call encodeURIComponent.

If you’re encoding an existing URL, call encodeURI.

Javascript escape() method does not encode the + character, which is interpreted as a space on the server-side as well as generated by forms with spaces in their fields.

Due to this shortcoming and the fact that this function fails to handle non-ASCII characters correctly, you should avoid the use of escape() whenever possible. The best alternative is usually encodeURIComponent().

escape() will not encode: @*/+

The use of the encodeURI() method is a bit more specialized than the escape() in that it encodes for URIs as opposed to the querystring, which is part of a URL.

Use the encodeURI() method when you need to encode the string to be used for any resource that uses URIs and needs certain characters to remain un-encoded. Note that this method does not encode the ‘ character, as it is a valid character within URIs.

encodeURI() will not encode: ~!@#$&*()=:/,;?+’

Lastly, an encodeURIComponent() method should be used in most cases when encoding a single component of a URI.

The encodeURIComponent() method will encode certain chars that would normally be recognized as special chars for URIs so that many components may be included. Note that this method does not encode the ‘ character, as it is a valid character within URIs.

encodeURIComponent() will not encode: ~!*()’

Finally, Javascript encodeURIComponent Function Example Tutorial is over.

Recommended Posts

Javascript encodeURI Function

Javascript JSON.stringify()

Javascript Regular Expressions

Javascript Template Literals Example

Javascript Blob Object Example

1 Comment
  1. Amit Parmar says

    thanks for the guide

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.