URL Encoding and Decoding: Everything You Need to Know

What is URL Encoding?

URL encoding, also known as percent-encoding, is a mechanism to encode characters in a URI that are otherwise not allowed or have special meaning. It replaces unsafe ASCII characters with a "%" followed by two hexadecimal digits.

Why URL Encoding Matters

URLs can only be sent over the Internet using the ASCII character set. Since URLs often contain characters outside the ASCII set, they must be converted to a valid ASCII format. URL encoding replaces non-ASCII characters with a "%" followed by hexadecimal digits.

Characters That Need Encoding

Reserved Characters

These have special meaning in URLs and must be encoded when used as data:

|-----------|---------|---------|

Unsafe Characters

• Space → %20 or +
• < → %3C
• > → %3E
• " → %22
• { → %7B, } → %7D

Common Pitfalls

1. Double Encoding

Encoding an already-encoded string causes double encoding: %26 becomes %2526. Always check if a string is already encoded before encoding again.

2. Encoding the Entire URL

Don't encode the entire URL — only encode the parameter values. Encoding / or ? in the URL structure will break the URL.

3. Plus Sign Confusion

In query strings, + represents a space. If you need a literal plus sign, use %2B.

encodeURI vs encodeURIComponent

JavaScript provides two encoding functions:

• `encodeURI()`: Encodes a complete URI. Does NOT encode : / ? # & = + $ @
• `encodeURIComponent()`: Encodes a URI component (parameter value). Encodes ALL reserved characters

// Use for full URLs
encodeURI("https://example.com/path?q=hello world")
// "https://example.com/path?q=hello%20world"

// Use for parameter values
encodeURIComponent("hello & world")
// "hello%20%26%20world"

Try It Yourself

Use our URL Encoder tool to encode and decode URL strings instantly. It handles both encodeURI and encodeURIComponent styles, running entirely in your browser.