JavaScript encodeURIComponent() Function

The encodeURIComponent() function is used to encode some parts or components of URI. This function encodes the special characters. In addition, it encodes the following characters: , / ? : @ & = + $ #

Syntax:

encodeURIComponent( uri_string_component );
Javascript
const component = "geeks for geeks";
const encodedComponent = encodeURIComponent(component);
console.log(encodedComponent);

Output
geeks%20for%20geeks

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 to use JavaScript functions like encodeURI(), encodeURIComponent(), escape(), decodeURI(), decodeURIComponent(), and unescape() for effective URL encoding and decoding.

Example:

  • Open www.google.com and write a search query “geeks for geeks”.
  • After search results appear, observe the browser’s URL bar. The browser URL will consist of %20 or + sign in place of space.
  • The URL will be displayed like: https://www.google.com/search?q=geeks%20for%20geeks or https://www.google.com/search?q=geeks+for+geeks

Note: The browser converted the spaces into + or %20 signs automatically.

Encoding a URL: Encoding in Javascript can be achieved using:

Table of Content

  • 1. JavaScript encodeURI Function
  • 2. JavaScript encodeURIComponent() Function
  • 3. JavaScript escape() function
  • 1. JavaScript decodeURI() Function
  • 2. JavaScript decodeURIComponent() Function
  • 3. JavaScript unescape() Function
  • 4. JavaScript querystring Module


Similar Reads

1. JavaScript encodeURI Function

The encodeURI() function is used to encode complete URI. This function encodes the special character except for (, / ?: @ & = + $ #) characters....

2. JavaScript encodeURIComponent() Function

The encodeURIComponent() function is used to encode some parts or components of URI. This function encodes the special characters. In addition, it encodes the following characters: , / ? : @ & = + $ #...

3. JavaScript escape() function

JavaScript escape() function takes a string as a single parameter & encodes the string that can be transmitted over the computer network which supports ASCII characters. Encoding is the process of converting plain text into ciphertext....

Decoding a URL

Decoding in Javascript can be achieved using...

1. JavaScript decodeURI() Function

The decodeURI() function is used to decode URI generated by encodeURI()....

2. JavaScript decodeURIComponent() Function

The decodeURIComponent() function is used to decode some parts or components of URI generated by encodeURIComponent()....

3. JavaScript unescape() Function

This function takes a string as a single parameter and uses it to decode that string encoded by the escape() function. The hexadecimal sequence in the string is replaced by the characters they represent when decoded via unescape() function....

4. JavaScript querystring Module

The querystring module provides utilities for parsing and formatting URL query strings. It can be used to encode and decode URL components....

Difference decodeURIComponent and decodeURI:

decodeURIComponentdecodeURIDefinitionThe decodeURIComponent() function is used to decode some parts or components of URI generated by encodeURIComponent().Decoding in Javascript can be achieved using decodeURI function.SyntaxdecodeURIComponent( encoded_uri_string_component )decodeURI( complete_encoded_uri_string )Special Character Encoding It takes encodeURIComponent(url) string so it can decode these characters.It takes encodeURI(url) string so it cannot decoded characters (, / ? : @ & = + $ #)ExampledecodeURIComponent(“%41”) It returns “A” decodeURIComponent(“%26”): It returns “&” decodeURI(“%41”): It returns “A” decodeURI(“%26”): It returns “%26”...