URL encoding is essential when working with web applications, especially when passing data through URLs. This article explains how to encode and decode URL components in Java and TypeScript using `encodeURIComponent()` in JavaScript and equivalent methods in Java.

Introduction to URL Encoding

URL encoding ensures that data can be safely transmitted within a URL by replacing special characters with `%`-encoded representations. The JavaScript function `encodeURIComponent()` is widely used for this purpose, especially when dealing with special characters or spaces.

For instance:

– “Hello World!” becomes “Hello%20World%21”.

This approach prevents issues in URL structures and keeps your data intact when it reaches the server.

Encoding URL Components in TypeScript

In TypeScript, encoding URL components is straightforward with encodeURIComponent().

const str = "Hello World!";
const encodedStr = encodeURIComponent(str);
console.log(encodedStr); // Output: Hello%20World%21

Base64 Encoding

If you want to encode data in Base64, use the `btoa()` function. Base64 encoding is commonly used when passing binary data through URLs.

const str = "Hello World!";
const encodedStr = btoa(str);
console.log(encodedStr); // Output: SGVsbG8gV29ybGQh

For special characters, you may need to use a `TextEncoder` in TypeScript:

const str = "Hello 🌍!";
const encoder = new TextEncoder();
const encodedBytes = encoder.encode(str);
const encodedStr = btoa(String.fromCharCode(...encodedBytes));
console.log(encodedStr);

Decoding URL Components in Spring

To decode `encodeURIComponent()`-encoded strings in a Spring or Java application, use the `URLDecoder` class:

import java.net.URLDecoder;
import java.nio.charset.StandardCharsets;

public class UrlDecodingExample {
  public static void main(String[] args) {
    try {
      // Encoded string example
      String encodedString = "Hello%20World%21";

      // Decode the string
      String decodedString = URLDecoder.decode(encodedString, StandardCharsets.UTF_8.toString());
      System.out.println("Decoded String: " + decodedString); // Output: Hello World!
    } catch (Exception e) {
      e.printStackTrace();
    }
  }
}

Explanation

– `URLDecoder.decode(encodedString, StandardCharsets.UTF_8.toString())`: This method decodes the URL component using UTF-8, making it compatible with JavaScript’s `encodeURIComponent()`.
– Exception Handling: Handle any encoding exceptions for robustness.

—

Common Use Cases

1. Data Passing: URL encoding is essential for safely passing special characters through query strings.
2. API Requests: Many REST APIs require encoded parameters to avoid query string errors.
3. International Characters: When URLs contain characters from non-Latin scripts, encoding ensures compatibility.

—

Conclusion

Whether working with TypeScript on the frontend or Java on the backend, encoding and decoding URL components ensures data integrity across different web layers. Following these steps will keep your application stable, secure, and compatible with diverse data inputs.

—

This article provides a quick reference to encoding and decoding URL components in modern web development.