How URL Encoding Works
Enter a string and choose component or full-URI behavior. Percent encoding represents selected UTF-8 bytes as a percent sign followed by two hex digits. Encode individual query values when constructing a URL from separate pieces.
Percent-Encoding Reserved Characters
Characters such as ampersand, equals and question mark have structural meaning in URLs. Encoding them inside a value prevents them from becoming separators. The correct set of escaped characters depends on which URL component you are building.
encodeURI vs encodeURIComponent
encodeURI preserves URL syntax such as slashes and query separators. encodeURIComponent escapes separators inside a value. Neither choice replaces careful URL construction with the URL and URLSearchParams APIs.
URL Encoding Examples
The query value hello world becomes hello%20world with component encoding. An ampersand in a value becomes %26. Encoding an already encoded percent sign can create %25 and produce unintended double encoding.
Unicode and Query String Encoding
Unicode is represented through UTF-8 bytes before percent encoding. Form-style query serialization can use plus for spaces, while encodeURIComponent uses %20. Match the decoder and context instead of replacing characters blindly.
More examples and technical details
What Percent-Encoding Is
A URL is not free text. RFC 3986 allows only a small set of US-ASCII characters, and some of those are reserved as structural delimiters: the slash separates path segments, the question mark starts the query, the ampersand separates parameters, the equals sign splits a key from its value, and the hash begins the fragment. If your data contains any of those characters, the parser on the other end will read them as structure rather than content.
Percent-encoding is the escape mechanism. The character is converted to its bytes in UTF-8, and each byte is written as a percent sign followed by two hexadecimal digits. A space becomes %20. Characters outside ASCII take multiple bytes, so the euro sign becomes %E2%82%AC, three bytes and therefore three escape sequences.
Characters That Are Never Encoded
The unreserved set is guaranteed safe anywhere in a URL and must be left alone, because encoding it changes nothing semantically but breaks string comparison and cache keys.
encodeURI vs encodeURIComponent
This is the single most common source of broken links. The two functions differ in one respect: whether they treat reserved delimiters as structure to preserve or as data to escape.
- encodeURI is for a whole URL. It leaves the delimiters : / ? # [ ] @ ! $ & ' ( ) * + , ; = intact so the address still parses.
- encodeURIComponent is for one piece of a URL, a single query value or path segment. It escapes those delimiters, because inside a value they are data.
The rule of thumb: if you are building a URL, use encodeURI once at the end or, better, build it with a URL object. If you are inserting a value into a URL, always use encodeURIComponent on that value alone.
Worked Example: A URL Inside a Parameter
Redirect parameters are where this bites hardest. Suppose you want to pass an entire search URL as the value of a redirect parameter.
Form Encoding: Why Spaces Become Plus
HTML form submissions use the media type application/x-www-form-urlencoded, which predates RFC 3986 and has one important quirk: a space is written as a plus sign rather than %20. Everything else follows percent-encoding as normal, and a literal plus sign in the data is encoded as %2B so the two cannot be confused.
Servers usually apply form decoding to query strings as well, which is why %20 and plus both tend to work in practice. Do not rely on it: a plus sign that survives into a value processed by a strict RFC 3986 parser stays a plus sign, and a password or search term silently changes meaning.
Percent-Encoding Reference Table
These are the characters you meet most often when working with query strings, path segments, and form data. Each one is replaced by a percent sign followed by the two hexadecimal digits of its byte value.
| Character | Encoded | Name |
|---|---|---|
| space | %20 | Space |
| ! | %21 | Exclamation mark |
| " | %22 | Double quote |
| # | %23 | Hash / fragment delimiter |
| $ | %24 | Dollar sign |
| % | %25 | Percent sign |
| & | %26 | Ampersand / parameter separator |
| ' | %27 | Apostrophe |
| ( | %28 | Left parenthesis |
| ) | %29 | Right parenthesis |
| * | %2A | Asterisk |
| + | %2B | Plus sign |
| , | %2C | Comma |
| / | %2F | Slash / path separator |
| : | %3A | Colon / scheme separator |
| ; | %3B | Semicolon |
| = | %3D | Equals / key value separator |
| ? | %3F | Question mark / query start |
| @ | %40 | At sign |
| [ | %5B | Left square bracket |
| ] | %5D | Right square bracket |
| newline | %0A | Line feed |
| tab | %09 | Horizontal tab |
Working on something related? Browse every free developer tool on the site, including a URL decoder, Base64 encoder, HTML encoder, and query string helpers. Everything runs entirely in your browser, so nothing you paste is ever uploaded.
Standards and references
Frequently asked questions
How do I URL-encode a string?
Paste a value and choose component encoding for a query value or path segment.
Why does a space become %20?
%20 represents the byte value of a space in percent encoding.
What is the difference between encodeURI and encodeURIComponent?
encodeURI preserves URI syntax; encodeURIComponent protects a value from being interpreted as syntax.
Should the entire URL be encoded?
Usually encode components separately. Encoding an entire URL as one component also escapes its structural separators.
Is text uploaded?
No. Input is processed in this browser tab and is not uploaded by the tool. Copy and download are actions you control; ordinary page analytics do not receive tool input.