What is URL Percent-Encoding?
A Uniform Resource Identifier (URI) relies on a restricted character set defined by RFC 3986. When a web address, query parameter, or path segment includes characters that are reserved or non-ASCII (such as accents, emojis, and international scripts), those characters must be converted into a standardized sequence called percent-encoding.
In percent-encoding, every byte of the character's UTF-8 representation is converted into a triplet consisting of a percent sign (%) followed by two uppercase hexadecimal digits. For example, the space character in UTF-8 is byte 0x20, which is encoded as %20. The letter ñ has the two-byte UTF-8 representation 0xC3 0xB1, which is encoded as %C3%B1.
URI Component Encoding vs Full URI Encoding
A common source of confusion in web development is distinguishing between encoding an entire URL and encoding an individual URL component:
-
Component Encoding (
encodeURIComponent): Encodes structural delimiter characters (including:,/,?,#,[,],@,$,&,+,,,;, and=) into percent triplets. This allows you to safely embed arbitrary strings, nested URLs, or form values inside query parameters without breaking the enclosing URL's syntax. -
Full URI Encoding (
encodeURI): Preserves structural delimiters (like protocolhttps://, path slashes, query delimiters, and fragment anchors) and only escapes characters that cannot legally appear anywhere in a URI (such as spaces and non-ASCII Unicode glyphs).
RFC 3986 Classification vs ECMAScript encodeURIComponent Behavior
Standard URI specifications and browser JavaScript engines handle character sets with distinct rules:
-
RFC 3986 Unreserved Characters: Consist strictly of uppercase letters (
A-Z), lowercase letters (a-z), decimal digits (0-9), hyphen (-), period (.), underscore (_), and tilde (~). These characters never require encoding. -
ECMAScript
encodeURIComponentPeculiarity: The JavaScript standard specifies thatencodeURIComponentleaves the characters!,',(,), and*unescaped. While RFC 3986 classifies these within reserved sub-delimiters, standard ECMAScript engines do not percent-encode them by default. This tool uses native JavaScript component encoding and follows standard ECMAScript behavior.
Key Characters Reference Table
| Character | Description | RFC 3986 Classification | encodeURIComponent Result | Decoded Value |
|---|---|---|---|---|
A-Z, a-z, 0-9, -, ., _, ~ |
Alphanumerics & standard unreserved | Unreserved | Unchanged (e.g. a) |
Unchanged (e.g. a) |
!, ', (, ), * |
Exclamation, quote, parens, asterisk | Reserved (sub-delims) | Unchanged (! ' ( ) *) |
! ' ( ) * |
(Space) |
Space character | Disallowed | %20 |
(Space) |
% |
Percent sign (escape char) | Reserved | %25 |
% |
+ |
Plus symbol | Reserved (sub-delim) | %2B |
+ |
& |
Query parameter delimiter | Reserved (sub-delim) | %26 |
& |
= |
Key-value separator | Reserved (sub-delim) | %3D |
= |
: |
Scheme / port separator | Reserved (gen-delim) | %3A |
: |
/ |
Path separator | Reserved (gen-delim) | %2F |
/ |
? |
Query string start | Reserved (gen-delim) | %3F |
? |
# |
Fragment anchor start | Reserved (gen-delim) | %23 |
# |
[, ] |
IPv6 host brackets | Reserved (gen-delim) | %5B, %5D |
[, ] |
@ |
Userinfo delimiter | Reserved (gen-delim) | %40 |
@ |
$ |
Dollar sign | Reserved (sub-delim) | %24 |
$ |
,, ; |
Comma, semicolon | Reserved (sub-delim) | %2C, %3B |
,, ; |
Important Considerations: Spaces, Pluses, and Double Encoding
When working with percent-encoded text, keep the following architectural behaviors in mind:
-
Plus (
+) vs%20: In standard URI percent-encoding, a space is encoded as%20and a plus sign is encoded as%2B. When decoding standard percent-encoded strings, a literal+is preserved as a plus sign. The substitution of+for spaces occurs only in legacyapplication/x-www-form-urlencodedform queries. -
Single-Pass vs Double Encoding: This tool executes exactly one encoding or decoding pass per click. If you encode
%20, the percent sign becomes%25, producing%2520. Decoding%2520once yields%20, preventing dangerous unintended recursive decoding. -
Malformed Sequence Handling: Decoding strings with incomplete triplets (e.g.
%2or%GG) or invalid UTF-8 byte sequences will trigger a clear, non-destructive error message rather than outputting corrupted text.
Frequently Asked Questions
What is URL percent-encoding and why is it needed?
URL percent-encoding converts characters that are reserved or not permitted in URIs into a % followed by their two-digit hexadecimal UTF-8 byte representation (for example, space becomes %20 and ampersand becomes %26). This ensures query parameters, path segments, and form values are transmitted reliably across the web without syntax ambiguity.
What is the difference between encoding a URL component and encoding a full URL?
Encoding a URL component (via encodeURIComponent) encodes delimiter characters like :, /, ?, &, and = into percent-triplets (such as %3A, %2F, %3F, %26, %3D) so they can be safely passed inside query string values or path segments. In contrast, full URL encoding (via encodeURI) preserves these structural delimiters and only escapes characters that are completely invalid in a URI.
Does the plus sign (+) represent a space when decoding a URL?
In standard URI percent-encoding specifications (RFC 3986) and native JavaScript decodeURIComponent, a literal plus sign (+) is treated as a literal plus character, decoded as +, and encoded as %2B. The convention of using + to represent spaces applies exclusively to query strings formatted as application/x-www-form-urlencoded (such as HTML form submissions).
Why does '%20' become '%2520' when I encode it again?
The percent sign % is itself a reserved character with the hexadecimal percent-encoding %25. When an already-encoded string containing %20 is passed through another encoding pass, the encoder transforms the % into %25, yielding %2520. This tool operates on exactly one layer per action and does not apply recursive transformations.
Why can URL decoding fail with an error?
URL decoding fails when the input contains malformed percent sequences (such as an isolated % or non-hexadecimal digits like %GG) or percent-encoded byte sequences that do not constitute valid UTF-8 sequences (such as incomplete multi-byte sequences %C3 or %E0%A4%A). When this occurs, our tool safely displays an error without corrupting data.
Is my text or URL uploaded to any remote server?
No. Processing happens locally in your browser using client-side JavaScript. Your input is not sent to our server for encoding or decoding, and is never stored.