URL Encode & Decode
Appliance Location: The Spice Rack Developer ToolWhat is URL Encoding? A Complete Guide
URL Encoding, also known as Percent Encoding, is a mechanism for encoding information in a Uniform Resource Identifier (URI). It replaces unsafe ASCII characters with a "%" followed by two hexadecimal digits. URLs can only be sent over the Internet using the ASCII character-set. Since URLs often contain characters outside the ASCII set, the URL must be converted into a valid ASCII format.
Why Encode? Characters like spaces, quotes, symbols (&, ?, #, /, 🙂 have special meanings in URLs. Encoding them ensures that web servers interpret them as data rather than commands. For example, if you want to search for "cars & trucks", the ampersand (&) would normally separate query parameters, so it must be encoded as %26.
The History of Percent Encoding
Percent encoding was introduced in RFC 1738 (1994) and later refined in RFC 3986 (2005). The term "percent encoding" comes from the % character used as the escape prefix. This standardization ensures that URLs work consistently across all browsers, servers, and programming languages worldwide.
Complete URL Encoding Reference Table
Below is the complete list of characters that require encoding in URLs, along with their percent-encoded equivalents:
| Character | Encoded | Character | Encoded |
|---|---|---|---|
space | %20 | ! | %21 |
" | %22 | # | %23 |
$ | %24 | % | %25 |
& | %26 | ' | %27 |
( | %28 | ) | %29 |
* | %2A | + | %2B |
, | %2C | - | %2D |
. | %2E | / | %2F |
0-9 | same | : | %3A |
; | %3B | < | %3C |
= | %3D | > | %3E |
? | %3F | @ | %40 |
A-Z | same | a-z | same |
[ | %5B | \ | %5C |
] | %5D | ^ | %5E |
_ | %5F | ` | %60 |
{ | %7B | | | %7C |
} | %7D | ~ | %7E |
Real-World Use Cases for URL Encoding
1. Web Development & API Integration
When building RESTful APIs, you must encode query parameters that contain special characters. Example: https://api.example.com/search?q=jazz%20%26%20blues searches for "jazz & blues". Without encoding, the & would break the parameter.
2. HTML Form Submissions
When a user submits an HTML form with method="GET", browsers automatically URL-encode all form data. Spaces become + or %20, and special characters are percent-encoded. The server then decodes this data automatically.
3. Redirect URLs (Return URLs)
When passing a destination URL as a parameter (e.g., login redirects), you must encode the nested URL. Example: https://site.com/login?return_to=https%3A%2F%2Fsite.com%2Fdashboard%3Ftab%3Dsettings
4. SEO-Friendly URL Slugs
Content management systems often convert special characters in blog post titles to percent-encoded or hyphenated versions. Encoding ensures special characters don't break URL structures.
5. E-commerce Product Filters
Product URLs with filters like "color=red&size=large" need encoding if values contain spaces or symbols. Example: ?brand=Levi%27s for "Levi's".
encodeURI vs encodeURIComponent: What's the Difference?
JavaScript provides two encoding functions, and understanding the difference is crucial:
- encodeURI(): Preserves characters that have special meaning in complete URLs:
;,/?:@&=+$#. Use this for encoding a full URL string. - encodeURIComponent(): Encodes ALL special characters, including
;,/?:@&=+$#. Use this for encoding query parameter values.
Example: For the URL https://example.com/?redirect=https://other.com/path?q=hello world, the nested URL must be encoded with encodeURIComponent(), resulting in https%3A%2F%2Fother.com%2Fpath%3Fq%3Dhello%20world. Our tool uses encodeURIComponent() as it's the most common requirement for parameter encoding.
Step-by-Step Examples
Example 1: Encoding a Search Query
Original: "coffee & tea near me"
Encoded: "coffee%20%26%20tea%20near%20me"
Use in URL: https://example.com/search?q=coffee%20%26%20tea%20near%20me
Example 2: Encoding an Email Address in a URL
Original: "user+test@example.com"
Encoded: "user%2Btest%40example.com"
Use in URL: https://example.com/login?email=user%2Btest%40example.com
Example 3: Encoding a File Path
Original: "documents/2024/report_v2.pdf"
Encoded: "documents%2F2024%2Freport_v2.pdf"
Note: Forward slashes are encoded because they're being passed as data, not as path separators.
Common URL Encoding Mistakes to Avoid
- Double Encoding: Encoding an already encoded string (e.g., %20 becomes %2520). Always check if your string is already encoded before encoding.
- Using Wrong Method: Using encodeURI when you should use encodeURIComponent (or vice versa).
- Forgetting to Decode: Displaying encoded text directly to users without decoding first.
- Mixing + and %20: In application/x-www-form-urlencoded data, spaces are encoded as +, but in standard URLs, they're %20.
URL Decoding: Reversing the Process
URL decoding is the reverse process of percent encoding. It converts %XX sequences back to their original characters. For example, Hello%20World%21 decodes to Hello World!. Modern browsers automatically decode URLs before displaying them in the address bar, but you'll often need to decode URL parameters manually when processing web analytics, log files, or API responses.
Frequently Asked Questions
What is the difference between URL encoding and HTML encoding?
URL encoding (percent encoding) is for sending data in URLs (e.g., space → %20). HTML encoding replaces characters for safe display in HTML (e.g., < → <). They serve different purposes and use different escape formats.
Why do I see %20 in URLs instead of spaces?
Spaces are not allowed in URLs according to the RFC 3986 specification. Browsers automatically convert spaces to %20 (or sometimes + in form data). If you type "hello world" in a search bar, the URL becomes "hello%20world".
What does %2F mean in a URL?
%2F is the encoded representation of the forward slash character (/). Slashes are reserved as path separators in URLs, so they must be encoded as %2F if they appear as data inside a parameter value.
What does %3F represent?
%3F is the encoded version of the question mark (?). Question marks indicate the start of query parameters in URLs, so they must be encoded when used as data.
How do I decode a URL in JavaScript?
Use the built-in function decodeURIComponent(str). For example: decodeURIComponent("hello%20world") returns "hello world". For full URLs, use decodeURI() instead.
Can I encode emojis and Unicode characters?
Yes! Unicode characters like emojis are encoded into multiple percent-encoded bytes. For example, a smiley face becomes "%F0%9F%98%80". Our tool handles all Unicode characters automatically.
Why does my decoded string show question mark characters?
This usually indicates the percent-encoded sequence is malformed or the original character doesn't exist in the UTF-8 character set. Ensure your input follows the proper %XX format with valid hexadecimal digits (0-9, A-F).
Is this tool free to use?
Yes, completely free. No registration, no usage limits, no hidden fees. Encode or decode as many strings as you need for your web development, API testing, or data processing tasks.
Does this tool work with non-English characters?
Absolutely. Our tool supports UTF-8 encoding, so characters from any language (Chinese, Arabic, Russian, etc.) are properly percent-encoded and decoded.
