Encode and decode URLs for safe transmission in query strings and API requests. Essential for web development and API debugging.

Encode

Decode

Common Use Cases

  • Query Strings: Encode parameters for GET requests
  • API Requests: Safely pass special characters in URLs
  • Form Submissions: Encode form data for URL-encoded POST requests
  • Link Sharing: Create shareable links with complex parameters
  • OAuth/SSO: Encode redirect URIs and state parameters
  • Debugging: Decode URLs from logs and network captures

URL Encoding Rules

Characters that must be encoded:

  • Spaces: %20 or +
  • Special Characters: !*'();:@&=+$,/?#[]
  • Reserved Characters: `% < > { } | \ ^ ~ [ ] ``
  • Non-ASCII Characters: Encoded as UTF-8 bytes

Safe characters (not encoded):

  • Alphanumeric: A-Z a-z 0-9
  • Unreserved: - _ . ~

Encode vs Encode Component

encodeURI(): Encodes a full URL, preserving protocol and domain

Lang: 
Input:  https://example.com/path?q=hello world
Output: https://example.com/path?q=hello%20world

encodeURIComponent(): Encodes everything including /, ?, &, =

Lang: 
Input:  https://example.com/path?q=hello world
Output: https%3A%2F%2Fexample.com%2Fpath%3Fq%3Dhello%20world

When to use which:

  • Use Encode URL for complete URLs
  • Use Encode Component for individual parameter values

Examples

Query Parameter:

Lang: 
Original: search?q=Linux & Windows
Encoded:  search?q=Linux%20%26%20Windows

OAuth Redirect:

Lang: 
Original: redirect_uri=https://app.com/callback?state=abc123
Encoded:  redirect_uri=https%3A%2F%2Fapp.com%2Fcallback%3Fstate%3Dabc123

Special Characters:

Lang: 
Original: name=O'Brien & Associates
Encoded:  name=O%27Brien%20%26%20Associates