URL Encoder
Percent-encode query values and full URLs for code
About URL Encoder
This URL encoder gives the three percent-encodings that JavaScript code usually needs. A value runs encodeURIComponent, which escapes & = ? / # and every other character except letters, digits, and - _ . ! ~ * ' ( ), for one query parameter or path segment. A whole URL runs encodeURI between the %XX escapes already present, so the address keeps its structure and %20 never becomes %2520. Strict RFC 3986 also escapes ! ' ( ) *. Decode runs decodeURIComponent and, by default, first reads + as a space, as form data does. The same calls you would write in code run here, on your machine.
Example
A query value encoded with "A value", then a full address encoded with "A whole URL":
Input
café au lait & croissants https://example.com/search?q=café au lait&page=2
Encode
caf%C3%A9%20au%20lait%20%26%20croissants https://example.com/search?q=caf%C3%A9%20au%20lait&page=2
How to URL-encode a value or a whole URL
- 1Paste a query value, a path segment, or a complete URL into the box.
- 2In "Encode as", pick "A value (query parameter, path segment)", "A whole URL (keeps : / ? # & = + ; , @ $)", or "Strict RFC 3986 (also ! ' ( ) *)".
- 3Click "Encode", or click "Decode" to turn %XX escapes back into characters.
- 4Take the encoded string with "Copy", or get it as encoded.txt through "Download".
Formats and limits
- Encode modes
- encodeURIComponent; encodeURI with existing %XX escapes kept; encodeURIComponent plus ! ' ( ) * escaped
- Decode
- decodeURIComponent, after turning + into a space unless you uncheck that box
- Kept by A whole URL
- Letters, digits, - _ . ! ~ * ' ( ) and ; / ? : @ & = + $ , #
- Errors
- A broken escape gives Invalid URL encoding; a lone surrogate character cannot be encoded
Common uses
- Building a query string by hand
- Check what encodeURIComponent returns for a search term containing & or # before concatenating ?q= and &page= in a fetch call or a curl command.
- Debugging a rejected signature
- When an OAuth 1.0a or AWS Signature Version 4 request is refused, encode each parameter with Strict RFC 3986 and compare it with the signature base string your library logs.
- Matching a redirect_uri
- An OAuth provider compares redirect_uri character for character: encoding https://app.example.com/callback with A value gives https%3A%2F%2Fapp.example.com%2Fcallback, the form that goes into the authorization URL.
- Reading a form body from a log
- Paste an application/x-www-form-urlencoded body such as name=Ann+Lee&city=S%C3%A3o+Paulo with the + box checked, and Decode returns name=Ann Lee&city=São Paulo.
Which tool to use
- URL Encoder: the text-tools page runs the same code for everyday links, search terms, and email subjects, explained without JavaScript function names; share it with someone who is not a programmer.
- URL Parser: to list every query parameter of a full address with its decoded value, read by the browser's URL class, instead of decoding the text as one string.
- HTML Encoder: when the text goes into an HTML page rather than an address: it writes & and < where this tool would write %26 and %3C.
Where your text is processed
Encoding and decoding call your browser's own encodeURIComponent, encodeURI, and decodeURIComponent inside this page, so the strings you paste, tokens and keys included, are not sent to our servers. When Encode, Decode, or a copy to the clipboard fails, we receive the browser's error message, the tool's name, and your browser's name and version, without the text that caused it.
Frequently asked questions
Should I use encodeURIComponent or encodeURI?
Use encodeURIComponent ("A value") for a single parameter: it escapes & = ? / # so they cannot end the value early. Use encodeURI ("A whole URL") for a complete address that must keep working; it leaves : / ? # & = and + untouched.
Why does + turn into a space when I decode?
The box "Decode "+" as a space (form data and query strings)" is checked by default, matching application/x-www-form-urlencoded data. Uncheck it when + means a real plus sign, as in a+b@x.com. A value and Strict RFC 3986 encode + as %2B, so their output never contains a raw +.
Are spaces encoded as %20 or +?
As %20, in all three modes. None of them writes + for a space; that convention belongs to HTML form encoding, which this tool reads when decoding but never produces.
Will an already encoded URL be encoded twice?
No with "A whole URL": escapes such as %20 are kept, so nothing turns into %2520. Yes with the other two modes, where % itself becomes %25, which is correct when the % character is part of the value.
Which mode do I need for an OAuth 1.0a signature or AWS Signature Version 4?
Strict RFC 3986. Both specifications leave only letters, digits, and - . _ ~ unescaped, which is exactly what that mode outputs; encodeURIComponent alone keeps ! ' ( ) * and the computed signature would not match.
How do I get + for spaces, as URLSearchParams writes them?
This tool always writes %20. Encode with A value, then replace each %20 with + in the result; any + that was in your text is already %2B, so it stays a plus sign.
Does Decode accept lowercase escapes such as %c3%a9?
Yes. decodeURIComponent reads hex digits in either case, so %c3%a9 and %C3%A9 both give é. The escapes the encoders add are always upper case.
Why does Encode refuse my string with a broken character message?
encodeURIComponent and encodeURI throw a URIError on a lone UTF-16 surrogate, half of an emoji pair, often left by cutting a string at a fixed length with slice or substring. Fix the string where it was cut; the page shows that message instead of a result.
Tips and tricks
- ✓Encode each parameter value with "A value" first, then join name=value pairs with & yourself.
- ✓"A whole URL" leaves + as it is: uncheck the + box before decoding such a result, or a + in it comes back as a space.