URL Encoder / Decoder
Safely encode special query parameters and URLs into percentage-encoded strings and decode them back.
Uniform Resource Identifier (URI) Percent-Encoding: Architecture & RFC 3986 Standards
The Uniform Resource Identifier (URI) and its common subset, the Uniform Resource Locator (URL), are the foundational addressing systems of the World Wide Web. Formally codified by Sir Tim Berners-Lee and the Internet Engineering Task Force (IETF) in RFC 3986 (updating legacy RFC 2396 and RFC 1738), URIs require a strict character set to guarantee deterministic interpretation across operating systems, web servers, browser user agents, and proxy gateways.
Because network transmission protocols historically supported only 7-bit US-ASCII, characters outside this constrained set—or characters that serve structural roles as protocol delimiters (such as ?, /, #, and &)—must be transformed into a standardized representation. This mechanism is known as Percent-Encoding (colloquially called URL Encoding).
Common URI Characters & RFC 3986 Hexadecimal Encoding Table
The reference table below illustrates how reserved structural delimiters and common characters are encoded under the RFC 3986 specification:
| Literal Character | Character Name | RFC 3986 Category | Percent-Encoded (Hex) | URI Semantic Role |
|---|---|---|---|---|
Space |
Whitespace | Disallowed Character | %20 (or + in forms) |
Word separation; invalid as a raw literal in URL paths |
/ |
Forward Slash | General Delimiter (gen-delim) | %2F |
Hierarchical path segment separator |
? |
Question Mark | General Delimiter (gen-delim) | %3F |
Initiator of the query string component |
# |
Hash / Number Sign | General Delimiter (gen-delim) | %23 |
Initiator of the client-side fragment identifier |
& |
Ampersand | Sub-delimiter (sub-delim) | %26 |
Query parameter separator (e.g. key1=val&key2=val) |
= |
Equals Sign | Sub-delimiter (sub-delim) | %3D |
Key-value assignment operator within query strings |
: |
Colon | General Delimiter (gen-delim) | %3A |
Scheme separator (https:) or port delimiter (:8080) |
@ |
At Symbol | General Delimiter (gen-delim) | %40 |
User information delimiter (user:pass@host) |
% |
Percent Sign | Escape Indicator | %25 |
Escape character initiating every percent-encoded sequence |
+ |
Plus Sign | Sub-delimiter (sub-delim) | %2B |
Literal math plus; frequently decoded as space in query strings |
The Mechanics of Percent-Encoding: From Octet to Hexadecimal
Under RFC 3986, percent-encoding represents an arbitrary byte using a three-character triplet: the percent character (%) followed by two hexadecimal digits representing the numeric byte value:
For example, the ASCII space character has decimal value 32, which translates to hexadecimal 20, yielding %20. When encoding multibyte Unicode characters (such as emoji, Cyrillic, Chinese, or Arabic scripts), the character is first serialized into a sequence of UTF-8 bytes, and each individual byte is percent-encoded. The euro symbol (€) consists of three UTF-8 bytes (0xE2 0x82 0xAC), which percent-encodes into %E2%82%AC.
JavaScript Architecture: encodeURI() vs. encodeURIComponent()
Modern frontend engineers must understand the critical functional distinction between JavaScript's two native encoding primitives:
- encodeURI(uri): Intended for encoding a complete URL. It preserves all characters that have syntactic significance in a URI:
: / ? # [ ] @ ! $ & ' ( ) * + , ; =. It only encodes characters that are fundamentally illegal in URLs, such as spaces (%20) and non-ASCII Unicode characters. - encodeURIComponent(component): Intended for encoding an individual query parameter value or key. It aggressively encodes all reserved delimiters—including
/,?,&,=, and:. If you pass an unencoded value like"user&admin=true"into a query string withoutencodeURIComponent(), the HTTP server will parse it as two separate query parameters, creating an HTTP Parameter Pollution (HPP) security vulnerability. - Legacy escape() (Deprecated): Never use
escape()in modern codebases. It is obsolete (ECMAScript Annex B), fails to follow RFC 3986, and improperly encodes Unicode characters as%uXXXXrather than UTF-8 hex pairs.
The Dreaded "Double-Encoding" Bug
A frequent bug in web applications occurs when an already-encoded string is inadvertently passed through an encoder a second time. Because the percent sign itself is a reserved escape indicator, encoding %20 a second time transforms the percent sign into %25, producing %2520. When received by the destination server, a single decoding pass yields %20 (as literal text) rather than the intended space character. Always ensure encoding occurs exactly once at the network boundary.
Frequently Asked Questions
Why is a space sometimes encoded as %20 and other times as a plus sign (+)?
%20 is the strict RFC 3986 percent-encoding standard for any URL path or generic URI component. The plus sign (+) is specific to HTML form data submitted via application/x-www-form-urlencoded query strings (defined by the W3C HTML specification). Modern web frameworks generally decode both %20 and + into spaces within query parameters, but only %20 is valid in URL path segments.
Which characters are never encoded in URLs?
Under RFC 3986 §2.3, the unreserved characters are never encoded: uppercase English letters (A–Z), lowercase English letters (a–z), decimal digits (0–9), hyphen (-), underscore (_), period (.), and tilde (~).
How does URL encoding protect against web application attacks?
Proper percent-encoding prevents HTTP Parameter Pollution (HPP) and Reflected Cross-Site Scripting (XSS). When user input containing delimiters like &, =, or <script> is encoded, web application firewalls and backend parsers treat the payload strictly as benign data rather than executable query structure or markup.
Can this tool decode malformed or partially corrupted URLs?
If a string contains an unescaped percent sign not followed by two valid hexadecimal characters (e.g. %2G or a trailing %), native decodeURIComponent() will throw an error. DIY Toolkit's decoder gracefully catches URI exceptions and flags the invalid sequence for correction.
Does this URL encoder support international characters and emoji?
Yes. Internationalized Resource Identifiers (IRIs) containing Unicode characters, Chinese/Japanese ideographs, Arabic script, and emoji are properly converted to their underlying UTF-8 byte sequences before hexadecimal percent-encoding.
Are my encoded links, tokens, or query strings tracked on a server?
No. DIY Toolkit operates 100% locally in your web browser. All URL parsing, percent-encoding, and string decoding occur strictly in browser memory. No URLs, session tokens, or confidential query parameters are ever logged or transmitted across the internet.