Back to Blog
    Web6 min readJanuary 18, 2026

    URL Encoding Guide: How to Encode & Decode URLs

    Understand URL encoding (percent-encoding) and why URLs have %20. Learn about reserved characters, common encoding errors, and how to fix them.

    Try the URL Encoder

    Put what you learn into practice

    What is URL Encoding?

    URL Encoding (officially "Percent-encoding") is a mechanism for encoding information in a Uniform Resource Identifier (URI).

    URLs can only be sent over the Internet using the US-ASCII character set. Since URLs often contain characters outside the ASCII set (like spaces, emojis, or foreign languages), the URL must be converted into a valid ASCII format.

    How It Works

    Unsafe characters are replaced with a % followed by two hexadecimal digits that represent the character's ASCII code.

    Common Examples:

    • Space ( ) $\rightarrow$ %20
    • Exclamation (!) $\rightarrow$ %21
    • Double Quote (") $\rightarrow$ %22
    • Slash (/) $\rightarrow$ %2F
    • Colon (:) $\rightarrow$ %3A

    Example: Original: https://example.com/search?q=hello world Encoded: https://example.com/search?q=hello%20world

    Reserved Characters

    RFC 3986 defines a set of Reserved Characters that imply special meaning in a URL structure: ! * ' ( ) ; : @ & = + $ , / ? # [ ]

    If these characters are used as data (e.g., a search query containing &), they must be extracted. If they are used as delimiters (e.g., the & separating query parameters), they must not be encoded.

    Example Failure: If you search for "Ben & Jerry's", the & must be encoded.

    • Wrong: ?q=Ben & Jerry's (Server thinks q=Ben and starts a new parameter Jerry's)
    • Right: ?q=Ben%20%26%20Jerry%27s

    Application/x-www-form-urlencoded

    When you submit an HTML form with POST, the browser encodes the data slightly differently than the standard URL encoding:

    • Spaces are replaced by + instead of %20.
    • hello world becomes hello+world.

    Most decoders handle both %20 and + as spaces, but strict adherence to standards matters for API signing.

    JavaScript Encoding Functions

    JavaScript provides two main functions, and choosing the wrong one is a common bug.

    1. encodeURI()

    Encodes a complete URL. It implies that standard delimiters like :, /, ?, & are intentional and preserves them.

    encodeURI("https://example.com/search?q=foo");
// Result: "https://example.com/search?q=foo" (No change)

    2. encodeURIComponent()

    Encodes a component of a URL (like a query parameter value). It encodes everything, including / and :.

    encodeURIComponent("hello/world");
// Result: "hello%2Fworld"

    Rule of Thumb:

    • Use encodeURI for the full URL string.
    • Use encodeURIComponent for values of keys (user input).

    Double Encoding

    A common error is encoding data twice.

    • Start: A B
    • Encode 1: A%20B
    • Encode 2: A%2520B (The % character was encoded to %25)

    When the server decodes this, it gets A%20B instead of A B. Always check if data is already encoded before encoding again.

    Conclusion

    URL Encoding is critical for web reliability. It ensures that complex data travels safely through the internet's ASCII-only pipelines.

    Use our URL Encoder to verify how your strings are converted and to decode mysterious URL strings you find in logs.

    URLencodingwebHTTPstandards