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 the standard 128 ASCII character set. Reserved characters that do not belong to this set must be encoded. This means that we need to encode these characters when passing into a URL. In JavaScript, we have two special functions to serve these tasks of encoding and decoding the URIs. encodeURI() and decodeURI() these functions are introduced to encode/decode non-English characters, such as Latin, Greek letters used in URI (Uniform Resource Identifier). Also, it is helpful to encode special characters, replace whitespaces in URI; sometimes these special characters or whitespaces can delimit the URI.
1. encodeURI(): It is used to encode a given URI into UTF-8 format. The encodeURI() function takes URI (of type string) as a function parameter value and encodes a URI by replacing each instance of certain characters with one, two, three, or four escape sequences representing the UTF-8 encoding of the character.
Syntax:
encodeURI(URI)
Parameters: here, URI is the parameter that consists of a complete URI- Uniform Resource Identifier (of type string) which you want to encoded.
Return value: Above function will return a new string representing the ‘encoded URI’ for the given URI provided as the parameter to the function.
Note: In many browsers encodeURI() doesn’t encode many characters following are the set of special characters [ ~!@#$&*()=:/,;?+’ ] to encode these characters sets escape() is implemented separately. As well as English alphabets and numbers [ A-Z a-z 0-9 – _ . ! ~ * ‘ ( ) ] are not escaped by the encodeURI() for encoding complete URI string you can use encodeURI() and if you have for the part of URI string then you can use encodeURIComponent() to encode particular part of URI string.
2. decodeURI(): It is used to decode already previously encoded URI. This works in reverse, taking an encoded string and replacing the tokens with the normal characters. The decodeURI() function takes encodedURI (of type string) as a function parameter value and decodes a given encoded-URI, previously created by encodeURI() or by a similar routine.
Syntax:
decodeURI(encodedURI)
Parameters: Here, encodedURI is the parameter that represents a complete, encoded URI (Uniform Resource Identifier). If you want decode the URI parameter must contain the URI in the encoded form only. Also, it throws an ‘URIError’ exception if the given parameter ‘encodedURI’ contains invalid character sequences.
Return value: above function will return a new string representing the decoded version of the given URI in the encoded form.
Note: Replaces each escape sequence in the encoded URI with the character that it represents, but does not decode escape sequences that could not have been introduced by encodeURI. It is used to decode the Cyrillic URLs as well; Cyrillic URL contains Cyrillic alphabet that looks similar to letters in the Latin alphabet (used in English), sometimes it is used to track the user and redirects them to fake websites.
Example:
Javascript
<script> const encoded = encodeURI(uri); console.log("Encoded URI - ", encoded); // Expected output: try { console.log("Decoded URI - ", decodeURI(encoded)); // Expected output: // "https://www.geeksforgeeks.org/?x=γεια" } catch (e) { console.error(e); } </script> |
Output:
Output of encodeURI and decodeURI
