🔗URL & UTM

URL Encoding & Decoding

Properly encode and decode URL components for safe transmission

Explanation

URL encoding converts special characters to percent-encoded format (%20, %3F, etc.) for safe use in URLs.

Examples

Encode special characters
Input
Hello World!
Output
Hello%20World%21
Encode email
Input
user@example.com
Output
user%40example.com
Decode encoded string
Input
Hello%20World%21
Output
Hello World!

Code Examples

JavaScript 
// Encode URL component (for query param values)
const encoded = encodeURIComponent('Hello World!');
// Result: 'Hello%20World%21'

// Decode URL component
const decoded = decodeURIComponent('Hello%20World%21');
// Result: 'Hello World!'

// Encode entire URI (preserves protocol, domain)
const fullUrl = encodeURI('https://example.com/path/Hello World');
// Result: 'https://example.com/path/Hello%20World'

// Common use case: Building query strings
function buildQueryString(params) {
  return Object.entries(params)
    .map(([key, value]) => 
      `${encodeURIComponent(key)}=${encodeURIComponent(value)}`
    )
    .join('&');
}

// Usage
const qs = buildQueryString({
  name: 'John Doe',
  email: 'john@example.com',
  message: 'Hello & goodbye!'
});
// Result: name=John%20Doe&email=john%40example.com&message=Hello%20%26%20goodbye%21

Try it Now

Open in URL Parser

💡 Tips

  • Use encodeURIComponent() for query param values
  • Use encodeURI() for full URLs
  • Always encode user input before adding to URLs
  • Spaces become %20 or + depending on context
  • URLSearchParams handles encoding automatically

⚠️ Common Pitfalls

  • encodeURI() doesn't encode ? & = # (use encodeURIComponent)
  • Double encoding can break URLs
  • Some characters don't need encoding but can be
  • Plus signs (+) have special meaning in query strings
← Back to All Templates