What is URL Encoding?
URL encoding, also known as percent-encoding, is a mechanism for encoding special characters in URLs (Uniform Resource Locators). Since URLs can only contain a limited set of ASCII characters, any characters outside this set must be encoded to be transmitted safely over the internet.
When a character is URL-encoded, it's replaced with a percent sign (%) followed by two hexadecimal digits representing the character's ASCII value. For example, a space becomes %20, and an ampersand becomes %26.
Why URL Encoding Matters
URL encoding is essential for web development and data transmission:
Query String Parameters
When passing data in URL query strings, special characters like &, =, and ? have specific meanings. If your data contains these characters, they must be encoded to prevent breaking the URL structure.
Form Submissions
When HTML forms are submitted via GET method, the browser URL-encodes the form data automatically. Understanding this encoding helps debug form submission issues.
API Requests
Many APIs require URL-encoded parameters. Failing to encode special characters can cause API errors, security vulnerabilities, or data corruption.
Internationalization
Non-ASCII characters (like accented letters, Chinese characters, or emojis) must be encoded for use in URLs, enabling truly global web applications.
Reserved vs Unreserved Characters
URLs define two categories of characters:
Unreserved Characters (Never Encoded)
These are safe to use without encoding: A-Z, a-z, 0-9, hyphen (-), underscore (_), period (.), and tilde (~).
Reserved Characters (Context-Dependent)
These have special meaning in URLs: : / ? # [ ] @ ! $ & ' ( ) * + , ; =. They should be encoded when used as data rather than delimiters.
encodeURIComponent vs encodeURI
JavaScript provides two URL encoding functions with different purposes:
encodeURIComponent
Encodes everything except: A-Z a-z 0-9 - _ . ! ~ * ' ( ). Use this for encoding query parameter values or any URL component that shouldn't contain special URL characters.
encodeURI
Preserves URL structure characters like : / ? # =. Use this when encoding a complete URL where you want to keep the URL syntax intact.
Common Encoding Mistakes
Double Encoding
Encoding an already-encoded string produces incorrect results. %20 becomes %2520, which decodes to %20 instead of a space.
Incomplete Encoding
Forgetting to encode special characters leads to broken URLs. A space in a filename becomes two separate paths.
Wrong Function Choice
Using encodeURI for query parameters leaves & and = unencoded, breaking the query string structure.
Privacy and Security
All encoding and decoding happens entirely in your browser. Your URLs and data never leave your computer. This is especially important when working with URLs containing authentication tokens, API keys, or personal information.
Common Use Cases
Query Parameter Encoding
Safely encode values for URL query strings, ensuring special characters do not break the URL structure.
API URL Construction
Build API request URLs with properly encoded parameters to prevent errors and security issues.
Tracking URL Creation
Encode marketing parameters and tracking data for analytics URLs without breaking functionality.
Form Data Debugging
Decode URL-encoded form submissions to inspect the actual data being sent.
Redirect URL Handling
Properly encode destination URLs used in redirect parameters to prevent injection attacks.
International URL Support
Encode non-ASCII characters in URLs to ensure proper handling across all browsers and servers.
Worked Examples
Encode Query Parameter
Input
search query with spaces & special=chars
Output
search%20query%20with%20spaces%20%26%20special%3Dchars
Spaces become %20, ampersand becomes %26, and equals becomes %3D. This encoded string can safely be used as a query parameter value.
Decode Complex URL
Input
https%3A%2F%2Fexample.com%2Fpath%3Fquery%3Dvalue%26other%3D123
Output
https://example.com/path?query=value&other=123
The encoded URL is decoded to reveal its readable form with proper URL structure characters restored.
Frequently Asked Questions
When should I use encodeURIComponent vs encodeURI?
Use encodeURIComponent for encoding query parameter values or any data that will become part of a URL. Use encodeURI only when encoding a complete URL where you want to preserve its structure (colons, slashes, etc.).
Why is my plus sign (+) not being decoded to a space?
The plus sign representing a space is specific to application/x-www-form-urlencoded format (HTML forms). Standard URL encoding uses %20 for spaces. Our decoder handles %20 but not + as a space.
What happens if I encode an already-encoded string?
You get double-encoding. For example, %20 becomes %2520. When decoded once, you get %20 instead of a space. Always decode completely before re-encoding.
Can I encode entire URLs safely?
Use the "Encode Full URL" option which uses encodeURI to preserve URL structure characters. For component parts like query values, use the default encoding.
Is my URL data sent to any server?
No, all encoding and decoding happens locally in your browser. Your URLs never leave your device, making it safe to encode URLs with sensitive parameters.
How do I encode special characters for a REST API?
Use encodeURIComponent for each parameter value separately. Build your URL by encoding values and joining them with & and = characters.