What a URL encoder does
A URL can only carry a small set of safe characters: letters, digits and - . _ ~. Anything else, such as a space, an accent, an emoji or a character that has a special meaning in a URL (&, =, ?, #, /), must be written as a percent code: a % followed by two hex digits for each byte of its UTF-8 form. This is called URL encoding or percent-encoding, and it is defined in RFC 3986. A URL encoder turns your text into that form so that it travels safely inside a link, a query string, a form post or an API call.
Example
Text with spaces, an accent and reserved characters:
café & tea = 5€ / cup
Encoded as a single value (component method):
caf%C3%A9%20%26%20tea%20%3D%205%E2%82%AC%20%2F%20cup
The letter é is two bytes in UTF-8 (C3 A9), and the euro sign is three (E2 82 AC), so they become two and three percent codes.
Which method should I choose?
| Method | Use it for | Space becomes | Keeps |
|---|---|---|---|
| Component | One value: a query parameter, a path segment, a fragment. The safe default. | %20 | A-Z a-z 0-9 - _ . ! ~ * ' ( ) |
| Full URL | A complete link where : / ? # & = must keep working. | %20 | Component set plus ; , / ? : @ & = + $ # |
| Form (+) | HTML form bodies and application/x-www-form-urlencoded. | + | A-Z a-z 0-9 * - . _ |
| RFC 3986 strict | Signatures (OAuth, AWS) that need exact, predictable output. | %20 | A-Z a-z 0-9 - . _ ~ |
| Every character | Obfuscation or tests: even letters become %XX. | %20 | Nothing |
When you are not sure, use Component for a value and Full URL only for a whole link. Not sure which is right? The encodeURI vs encodeURIComponent comparison shows all of them side by side for your own text.
Options
- Hex case.
%C3%A9(uppercase, recommended by RFC 3986) or%c3%a9(lowercase). Both mean the same. - Do not double-encode existing %XX. Leaves sequences that are already encoded alone, so
caf%C3%A9does not becomecaf%25C3%25A9. Use it only when the input is a mix of raw and encoded text. - Encode line by line. Each line is encoded on its own and the line breaks are kept, handy for lists of values or keywords.
Encode in code
// JavaScript
encodeURIComponent('café & tea'); // "caf%C3%A9%20%26%20tea"
new URLSearchParams({q: 'café & tea'}); // "q=caf%C3%A9+%26+tea"
// PHP
rawurlencode('café & tea'); // caf%C3%A9%20%26%20tea (RFC 3986)
urlencode('café & tea'); // caf%C3%A9+%26+tea (form style)
# Python
from urllib.parse import quote, quote_plus
quote('café & tea', safe='') # 'caf%C3%A9%20%26%20tea'
quote_plus('café & tea') # 'caf%C3%A9+%26+tea'
Common mistakes
- Encoding a whole URL with the component method.
https://turns intohttps%3A%2F%2Fand the link stops working. Encode each value, then put the URL together. - Encoding twice. A
%becomes%25, so%20turns into%2520. Encode raw text once, and only once. - Using
+outside forms.+means a space only in the query string of form data. In a path, a space must be%20.
Privacy
The encoding runs in your browser with plain JavaScript. Your text is not uploaded, stored or logged.
Next steps: the URL decoder reverses the result, the percent-encoding tool shows every byte, and the query string builder assembles whole parameter lists. For the rules behind all this, read the URL encoding guide. Related: HTML encode for web page text.