URL Encoder

How to use the URL encoder

1. Type or paste your text in the box, or press Example to load café & crème brûlée/50% off?.
2. Under Encode, choose what the text is: A value (encodeURIComponent), A whole URL (encodeURI) or Form data (spaces as +).
3. Tick Encode each line separately if the box holds a list, such as one search term per line.
4. The result updates as you type. Press Copy, Download .txt, or Use as input to work on it further.

The three modes

The only thing that changes between the modes is which characters are left as they are. All three encode text as UTF-8 and write each byte as % plus two uppercase hex digits.

Here is the example text in each mode:

In the whole-URL result, the &, / and ? are kept, so a server would read them as a parameter separator, a folder and the start of a query. That is right for a link and wrong for a value.

encodeURIComponent vs encodeURI: which one you need

The rule is simple: encode each piece, not the finished URL. If you are inserting a value into a URL, use the value mode on that value alone. Use the whole-URL mode only to tidy up a complete link that already has the right structure but contains spaces or non-ASCII letters.

The second row shows why the choice matters. If a search term is a+b=c and you send it as q=a+b=c, the server reads the + as a space and receives a b=c. The value mode sends q=a%2Bb%3Dc, which arrives as a+b=c.

The third row shows both uses: the whole-URL mode keeps the link working, and the value mode turns the entire link into one safe string, which is what you need when a URL goes inside another URL, for example as a redirect= or url= parameter.

Encoding rules and edge cases

• Unreserved characters stay. RFC 3986 lists letters, digits, -, ., _ and ~ as unreserved, so they never need encoding. JavaScript also leaves ! * ' ( ) alone in the value and whole-URL modes. RFC 3986 counts those five as reserved, but browsers and servers accept them as they are.
• The percent sign is always encoded as %25, so 50% becomes 50%25. This also means already-encoded text gets encoded twice: 100%25 becomes 100%2525. The whole-URL mode does this too, so do not run it on a link that already contains %XX codes. When the input contains %XX sequences, the line under the result warns that they were encoded again and suggests decoding first.
• Accents, other scripts and emoji become their UTF-8 bytes: é → %C3%A9, € → %E2%82%AC, 日本 → %E6%97%A5%E6%9C%AC, 👍 → %F0%9F%91%8D.
• Characters that are never valid in a URL, such as ", <, >, {, |, \, ^, `, [ and ], are encoded in all modes, including whole-URL mode.
• Line breaks and tabs are encoded as %0A and %09 when the text is encoded as one piece. With Encode each line separately, each line is encoded on its own and the line breaks stay as real line breaks.
• Form data mode follows the WHATWG URL Standard’s form encoding, the same output as JavaScript’s URLSearchParams: spaces become +, and ! ' ( ) ~ are encoded too, so !'()~ becomes %21%27%28%29%7E. Only *, -, _ and . stay besides letters and digits.
• Broken characters (half of an emoji, left behind when another program cut the text in the wrong place) cannot be converted to UTF-8. Instead of a result, the tool shows an error with the character’s position, for example: “The text contains a broken character (half of an emoji or symbol) at position 2.” Delete that character or paste the text again.

Encoding a list, line by line

With Encode each line separately ticked and the value mode selected:

New York
São Paulo
R&D team

becomes:

New%20York
S%C3%A3o%20Paulo
R%26D%20team

Without the option, the same text becomes one line: New%20York%0AS%C3%A3o%20Paulo%0AR%26D%20team. Use the line-by-line output for a spreadsheet column of tracking parameters or a list of search URLs; use the single-line output when the whole block is one parameter value.

When people need a URL encoder

• Building tracking links. UTM values such as a campaign name with spaces or an & (Spring & Summer) must be encoded as values, or the & ends the parameter early.
• Passing a URL inside a URL. Login redirects, share links and link shorteners take a full address as a parameter. Encode it in the value mode so its ?, & and # do not mix with the outer URL.
• SVG in CSS data URIs. For background-image: url("data:image/svg+xml,…"), encode the SVG code in the value mode. The # in a color such as fill="#e11" must become %23; the whole-URL mode leaves # alone, which ends the image data at that point. For binary images, use Base64 instead.
• API calls and scripts. Query values with non-ASCII names, slashes or plus signs need encoding before they go into a request URL.
• Links with spaces or accents. A file link such as report final é.pdf works more reliably once the whole-URL mode turns the spaces and é into %20 and %C3%A9.

If you want a readable address for a new page rather than an encoded one, a slug generator is usually a better fit: it turns Crème Brûlée Recipe into creme-brulee-recipe. For the background on why URLs need encoding at all, read what URL encoding is and how it works.

Questions