URL Encoding vs URL Decoding: What's the Difference?
Quick Answer
URL encoding converts special characters into percent-encoded format (like space → %20) so they can be safely transmitted in a URL. URL decoding reverses this process, converting percent-encoded characters back to their original form.
Encoding makes URLs safe for transmission. Decoding makes them readable for humans and processing.
| Process | What It Does | Example |
|---|---|---|
| Encoding | Converts special chars to %XX format | hello world → hello%20world |
| Decoding | Converts %XX back to original chars | hello%20world → hello world |
What Is URL Encoding
URL encoding (also called percent-encoding) converts characters into a format that can be safely transmitted over the internet. URLs can only contain ASCII characters, so any character outside this set — or characters with special meaning in URLs — must be encoded.
Each encoded character is represented by a percent sign % followed by two hexadecimal digits that represent the character's byte value.
Why Encoding Is Necessary
- Spaces — Not allowed in URLs, must be encoded as
%20or+ - Special characters — Characters like
&,=,?have special meaning in URLs - Non-ASCII characters — International characters like é, ü, 中 must be encoded
- Reserved characters — Characters like
/,#,%need encoding when used as data
What Is URL Decoding
URL decoding reverses the encoding process. It converts percent-encoded sequences back to their original characters. This is necessary when you receive encoded data and need to process or display it.
Encoded: search?q=hello%20world%21
Decoded: search?q=hello world!
Decoding is typically done by web servers, browsers, or applications that process URL parameters.
Common Encoding Examples
| Character | Encoded As | Notes |
|---|---|---|
| space | %20 | Most common encoding; sometimes + in query strings |
| ! | %21 | Exclamation mark |
| @ | %40 | At sign |
| & | %26 | Ampersand (separates query params) |
| = | %3D | Equals sign (separates keys and values) |
| / | %2F | Forward slash (path separator) |
| ? | %3F | Question mark (starts query string) |
| # | %23 | Hash (fragment identifier) |
| % | %25 | Percent sign itself |
| é | %C3%A9 | Non-ASCII character (UTF-8 encoding) |
When to Encode vs Decode
When to Encode
- Building URLs with user input (search queries, form data)
- Passing data in query parameters
- Creating links with special characters
- Sending data via GET requests
When to Decode
- Processing incoming URL parameters on a server
- Displaying URL data to users
- Logging or debugging URL contents
- Extracting values from encoded strings
Never double-encode. Encoding an already-encoded string will corrupt the data. hello%20world encoded again becomes hello%2520world, which decodes to hello%20world (not the original).
encodeURI vs encodeURIComponent
JavaScript provides two encoding functions with different purposes:
encodeURI
Use for complete URLs. Preserves URL structure characters like / : ? & = #.
encodeURI("https://example.com/search?q=hello world")
→ https://example.com/search?q=hello%20world
encodeURIComponent
Use for individual query parameter values. Encodes ALL special characters including URL structure characters.
encodeURIComponent("hello world & goodbye")
→ hello%20world%20%26%20goodbye
Learn more about when to use each in our how to encode a URL guide.
Common Mistakes
- Double-encoding — Encoding already encoded strings
- Using wrong function — Using encodeURI for query parameter values
- Forgetting to decode — Displaying encoded strings to users
- Not encoding user input — Creating broken or unsafe URLs
- Mixing encoding types — Using + for spaces in path segments (only valid in query strings)