What is URL Percent-Encoding?
Uniform Resource Identifiers (URIs and URLs) must be transmitted over the internet using a strictly limited subset of the standard US-ASCII character set. Characters that carry syntactic meaning in a URL (such as ? to start a query string, = to assign parameters, & to separate arguments, and / to denote path segments) cannot be used freely as arbitrary data values.
To safely transmit arbitrary binary data, reserved delimiters, spaces, and international Unicode characters, the Internet Engineering Task Force (IETF) created percent-encoding (RFC 3986). Percent-encoding converts unsupported characters into a triplet consisting of a percent character (%) followed by two hexadecimal digits representing the character's UTF-8 byte value.
Component Mode vs Full URL Mode
Modern JavaScript provides two built-in functions for URL manipulation, each tailored for different use cases:
Component Mode (encodeURIComponent)
Encodes almost all special punctuation, including : / ? # [ ] @ ! $ & ' ( ) * + , ; =. This mode is essential when encoding user inputs or variable values intended to be placed inside a query string parameter (e.g. ?search=value).
Full URL Mode (encodeURI)
Intended for entire complete URLs. It preserves protocol headers (https://), domain colons, slashes, question marks, and hash fragments, while encoding spaces and non-ASCII foreign characters.
Common Reserved Characters & Percent Codes
| Character | Percent Code | Standard Meaning in URLs |
|---|---|---|
| Space | %20 or + | Whitespace between search keywords or words |
/ (Slash) | %2F | Directory and path hierarchy separator |
? (Question Mark) | %3F | Starts query string parameter section |
& (Ampersand) | %26 | Separates individual key-value query parameters |
= (Equals) | %3D | Assigns value to a query parameter key |
# (Hash) | %23 | Anchor fragment identifier |
Real Worked Examples
Example 1: Parameter Encoding (Component Mode)
Input query string value containing reserved symbols and foreign characters:
a b&c=d/éEncoded output in component mode:
a%20b%26c%3Dd%2F%C3%A9Notice that & became %26, = became %3D, / became %2F, and the French accented letter é became %C3%A9.
Example 2: Complete Web Address Encoding
Input URL with spaces and foreign path characters:
https://example.com/wiki/Café & Bistro?city=São PauloEncoded with full URL mode:
https://example.com/wiki/Caf%C3%A9%20&%20Bistro?city=S%C3%A3o%20PauloCommon Mistakes in URL Encoding
- Double Encoding: Encoding an already encoded string turns
%20into%2520because the percent character itself gets encoded as%25. Always verify whether incoming strings are raw or already encoded. - Using Component Mode on Whole URLs: Running
encodeURIComponentonhttps://example.com/pathturns it intohttps%3A%2F%2Fexample.com%2Fpath, destroying its validity as a browser link. - Unescaped Query Values Breaking APIs: Passing
?company=Ben&Jerryswithout encoding turns&Jerrysinto an unrecognized second parameter instead of part of the company name.
Explore Related Developer Utilities
Frequently Asked Questions (FAQ)
What is the difference between encodeURI and encodeURIComponent?
encodeURI preserves protocol and domain syntax characters such as ://, ?, #, and / for full web addresses. encodeURIComponent encodes these characters into percent-escaped codes so they can be safely passed as parameter values inside query strings.
How does URL percent-encoding handle spaces?
Under RFC 3986 percent-encoding, spaces are encoded as %20. In query string application/x-www-form-urlencoded contexts, spaces are often represented as plus signs (+). This tool decodes both %20 and + into normal spaces.
Can this tool handle non-English international characters?
Yes. The encoder uses modern UTF-8 multi-byte encoding, ensuring accented Latin letters, Asian logograms, Cyrillic, Arabic, and emojis encode and decode accurately.
What causes a Malformed URI Sequence error during decoding?
This error occurs when a percent sign (%) is followed by invalid hexadecimal characters (e.g., %ZZ) or when a multi-byte UTF-8 sequence is truncated.
Are my URLs or query parameters logged on your server?
No. All encoding and decoding operations run locally in your web browser. Neither your web addresses nor their parameters are sent to an external server.