How to Decode URI in TypeScript?
When working with web applications in TypeScript, you may encounter situations where you need to decode Uniform Resource Identifiers (URIs) to handle special characters or extract information from encoded URLs. TypeScript, being a superset of JavaScript, provides access to native JavaScript functions for URI decoding.
Understanding decodeURI( )
decodeURI() is primarily used to decode the URIs that have been encoded by using the encodeURI() method. When processing user input that involves encoded URIs or working with data acquired from external sources, it is required to do so.
Syntax:
decodeURI(encodedURI: string): string
Using decodeURI() and decodeURIComponent()
TypeScript provides two methods for decoding URIs:
decodeURI( ): This function is used to decode a complete URI, converting any encoded characters back to their original form while preserving the URI structure.decodeURIComponent( ): UnlikedecodeURI(), this function is specifically designed to decode individual URI components, such as query parameters or fragments.
Parameters:
encodedURI (required): The string URI that has to be decoded.
Return Type:
The method returns the decoded URI as a newly created string.
Example 1: Implementation to decode URI using decodeURI() method.
// Define the encoded URI
const originalURI: string = "www.w3wiki.o rg";
// encoding the URI
let encodedURI = encodeURI(originalURI);
console.log("The encoded URI is " + encodedURI);
// decoding the URI
let decodedURI = decodeURI(encodedURI);
console.log("The decoded URI is " + decodedURI);
Output:
The encoded URI is www.w3wiki.o%20%20%20rg
The decoded URI is www.w3wiki.o rg
Example 2: Implementation to decode URI using decodeURIComponent( ) method. This code demonstrates encoding and decoding of a URI component. In the first part, it encodes the string “w3wiki.net/:>” and constructs a URL. Then, it decodes a provided URI component string and constructs another URL. Finally, it logs both encoded and decoded URLs to the console.
// Encoding the URI component
let encodedURIComponent = `https://www.${
encodeURIComponent(
"w3wiki.net/:>"
)}=`;
console.log(
"The encoded URI component is " + encodedURIComponent);
// Decoding the URI component
let decodedURIComponent = `https://www.${
decodeURIComponent(
"w3wiki.%320org/:%3E"
)}=`;
console.log(
"The decoded URI component with 'w3wiki.net' is " +
decodedURIComponent);
Output:
The encoded URI component is https://www.w3wiki.net%2F%3A%3E=
The decoded URI component with 'w3wiki.net' is https://www.w3wiki.20org/:>=
Conclusion:
Decoding URIs in TypeScript is a crucial aspect of web development, especially when dealing with data transmission and manipulation. By leveraging the built-in functions decodeURI() and decodeURIComponent(), developers can safely decode encoded URI components while adhering to URI standards and preserving data integrity. Understanding the importance of URI decoding, along with best practices for its usage, empowers developers to handle URI-related tasks effectively and securely in TypeScript applications.
Contact Us