URL Encoding (Percent Encoding)
Converts characters that are not allowed in URLs into a percent-encoded format using the notation %XX where XX is the two-digit hexadecimal value of the character's UTF-8 byte. Spaces become %20, @ becomes %40, and ampersands become %26. It ensures that special characters in URLs are transmitted correctly without being misinterpreted as structural delimiters.
URL encoding (percent encoding) converts characters that have special meaning in URLs — or are not valid in URLs — into a safe representation using the format %XX where XX is the hexadecimal byte value. For example, a space becomes %20, @ becomes %40, and & becomes %26. Defined in RFC 3986.
Why It Exists
URLs have a limited character set. Structural characters like ?, &, =, #, and / have specific meanings in URLs. If a query parameter value contains &, it would be misinterpreted as a separator. URL encoding escapes these characters so they are treated as literal data.
Key Characters
| Character | Encoded | Notes |
|---|---|---|
| Space | %20 | Also + in form data |
& | %26 | Parameter separator when literal |
= | %3D | Key-value separator when literal |
# | %23 | Fragment identifier when literal |
+ | %2B | Plus sign (not space in paths) |
/ | %2F | Path separator when literal |
? | %3F | Query start when literal |
@ | %40 | Authority separator |
JavaScript Functions
// Encode a value to go inside a URL (encodes most special chars)
encodeURIComponent("hello world & more"); // "hello%20world%20%26%20more"
// Encode a full URL (preserves structural chars like / ? &)
encodeURI("https://example.com/search?q=hello world"); // preserves ? but encodes space
// Decode
decodeURIComponent("hello%20world"); // "hello world"
Rule: always use encodeURIComponent for values that go inside URLs. Use encodeURI only for complete URLs.
Multi-Byte Characters
Non-ASCII characters encode each UTF-8 byte separately:
é = UTF-8: 0xC3 0xA9 → %C3%A9
中 = UTF-8: 0xE4 0xB8 0xAD → %E4%B8%AD
Encode and decode URLs with the URL Encoder/Decoder Tool.