URL Encoding and Decoding: A Complete Guide

What Is URL Encoding?

URL encoding, also known as percent-encoding, is a method for encoding information in a Uniform Resource Identifier (URI). It replaces characters that are not allowed in a URL — or that have special meaning — with a percent sign (%) followed by two hexadecimal digits representing the character's ASCII byte value.

For example, a space character (ASCII 32, or 0x20) is encoded as %20. The question mark ? is encoded as %3F. This mechanism ensures that URLs remain valid and unambiguous regardless of what characters appear in their values.

Every time you type a search query into Google and see %20 instead of spaces in the address bar, you are seeing URL encoding in action. It is one of the most fundamental concepts in web development and API design.

Reserved and Unsafe Characters

URLs have two categories of special characters:

• Reserved characters have syntactic meaning in URLs. These include : / ? # [ ] @ ! $ & ' ( ) * + , ; =. They must be encoded when used outside their intended purpose.
• Unsafe characters should always be encoded. These include spaces, angle brackets < >, curly braces { }, pipe |, backslash \, and double quotes ".

Common URL Encoded Characters

encodeURI vs encodeURIComponent

In JavaScript, there are two encoding functions, and choosing the wrong one is a common source of bugs:

• encodeURI() encodes a full URI. It preserves characters that have structural meaning in URLs like : / ? # [ ] @. Use this when encoding an entire URL.
• encodeURIComponent() encodes a URI component (like a query parameter value). It encodes all special characters, including reserved ones. Use this when encoding individual values being placed into a URL.

Example: To build https://example.com/search?q=hello world&lang=en, you should encode only the parameter values: encodeURIComponent("hello world") produces hello%20world.

Best Practices

• Always encode user input before placing it in a URL to prevent injection attacks.
• Use encodeURIComponent for query parameter values, not encodeURI.
• Be aware that + can represent a space in form-encoded data (application/x-www-form-urlencoded), but %20 is the standard for URL encoding.
• Double-encoding can cause issues. Always decode before re-encoding when processing URLs programmatically.