URL Encoder/Decoder

Input
Output

Common Character Encodings

Space %20
! %21
# %23
$ %24
& %26
' %27
= %3D
? %3F

Advertisement Space

Your ad could be here

πŸ› οΈ Related Tools

πŸ”— The Complete Guide to URL Encoding

Quick Summary

URL encoding (also called percent encoding) converts characters into a format that can be safely transmitted over the internet. Special characters are replaced with a percent sign (%) followed by two hexadecimal digits representing the character's ASCII code.

Ever wondered why some URLs look like this: example.com/search?q=hello%20world? That %20 is URL encoding in action! It's the internet's way of handling spaces and special characters in web addresses.

Why URL Encoding Exists

URLs were designed in the early days of the internet with a limited set of characters in mind. The original specification only allowed:

  • Letters (A-Z, a-z)
  • Numbers (0-9)
  • A few special characters: - _ . ~

But what happens when you need to include a space, a question mark, or even emoji in a URL? That's where URL encoding comes in!

How URL Encoding Works

The encoding process is straightforward:

  1. Take the character you want to encode
  2. Find its ASCII/Unicode value
  3. Convert that value to hexadecimal
  4. Prefix it with a percent sign (%)
Space character β†’ ASCII 32 β†’ Hex 20 β†’ %20
! character β†’ ASCII 33 β†’ Hex 21 β†’ %21
# character β†’ ASCII 35 β†’ Hex 23 β†’ %23

Reserved Characters in URLs

Some characters have special meanings in URLs and must be encoded when used as data:

⚠️ Always Encode These Characters

  • ? - Starts the query string
  • & - Separates parameters
  • = - Separates keys and values
  • # - Starts the fragment identifier
  • / - Path separator
  • : - Port separator

encodeURI vs encodeURIComponent

JavaScript provides two built-in functions for URL encoding:

encodeURI()

Encodes a complete URI, preserving the URL structure:

encodeURI("https://example.com/my file.html")
// Result: "https://example.com/my%20file.html"

encodeURIComponent()

Encodes everything, perfect for query parameters:

const param = "hello & goodbye";
const url = "https://example.com/search?q=" + encodeURIComponent(param);
// Result: "https://example.com/search?q=hello%20%26%20goodbye"

The Plus Sign Debate: + vs %20

You might see spaces encoded as either + or %20. Both are valid, but used in different contexts:

  • %20 - Standard percent encoding (works everywhere)
  • + - Form data encoding (mainly in query strings)

Common Use Cases

1. Search Queries

// User searches for: "what's new?"
const search = "what's new?";
const url = "https://example.com/search?q=" + encodeURIComponent(search);
// Result: "https://example.com/search?q=what's%20new%3F"

2. API Parameters

// Passing JSON data in URL
const data = { name: "John Doe", age: 30 };
const encoded = encodeURIComponent(JSON.stringify(data));
const apiUrl = `https://api.example.com/user?data=${encoded}`;

3. File Downloads

// Filename with special characters
const filename = "Report (2024) - Final.pdf";
const downloadUrl = "/download/" + encodeURIComponent(filename);

International Characters & Unicode

Modern URLs support international characters through UTF-8 encoding:

// Chinese characters
encodeURIComponent("δ½ ε₯½") // "%E4%BD%A0%E5%A5%BD"

// Emoji
encodeURIComponent("πŸ˜€") // "%F0%9F%98%80"

πŸ’‘ Pro Tips

  • Always encode user input before adding it to URLs
  • Use encodeURIComponent() for query parameters
  • Use encodeURI() only for complete URLs
  • Decode URLs when displaying them to users
  • Be consistent with + vs %20 in your application

Security Considerations

Proper URL encoding is crucial for security:

  • Prevents Injection Attacks: Encoding special characters prevents them from being interpreted as URL structure
  • Avoids Breaking URLs: Unencoded characters can break URL parsing
  • Cross-Site Scripting (XSS): Always encode user data in URLs to prevent XSS attacks

Debugging URL Encoding Issues

Common problems and solutions:

Double Encoding

// Wrong: Encoding an already encoded string
let encoded = "%20";
let doubleEncoded = encodeURIComponent(encoded); // "%2520"

// Right: Check if already encoded
if (decodeURIComponent(str) === str) {
    // Not encoded, safe to encode
    encoded = encodeURIComponent(str);
}

Incorrect Function Usage

// Wrong: Using encodeURI for parameters
const url = "https://example.com/search?q=" + encodeURI("hello & world");
// Result has unencoded & which breaks the query

// Right: Use encodeURIComponent
const url = "https://example.com/search?q=" + encodeURIComponent("hello & world");
// Result properly encodes the &

Browser Address Bar vs Actual URL

Modern browsers display decoded URLs for readability but send encoded versions:

  • What you see: example.com/search?q=hello world
  • What gets sent: example.com/search?q=hello%20world

⚑ Performance Note

URL encoding/decoding is fast, but avoid doing it repeatedly in loops. Cache encoded values when possible, especially for static strings.

URL Encoding in Different Languages

Every programming language has URL encoding functions:

// JavaScript
encodeURIComponent("hello world")

// Python
urllib.parse.quote("hello world")

// PHP
urlencode("hello world")

// Java
URLEncoder.encode("hello world", "UTF-8")

// C#
HttpUtility.UrlEncode("hello world")

Best Practices Summary

  • Always encode user input before including in URLs
  • Use the appropriate encoding function for your use case
  • Be consistent with space encoding (+ vs %20)
  • Test with special characters and international text
  • Remember that URLs have length limits (around 2048 characters)
  • Document your encoding choices for your team

URL encoding might seem like a small detail, but it's fundamental to how the web works. Master it, and you'll avoid countless bugs and security issues in your web applications!