Skip to content
Tools

URL Encoder

Encode URLs and text instantly using percent encoding for safe transmission across browsers, APIs and web applications. Everything runs locally in your browser.

Input

51
Output view
69

In: 51 characters · 2 words · 1 lines · 51 B

Out: 69 characters · 69 B · 9 encoded · <1 ms

Everything happens locally in your browser. Your data is never uploaded.

What is URL encoding?

URL encoding, or percent-encoding, replaces characters that a URL cannot safely carry with a % followed by two hexadecimal digits. A space becomes %20, a question mark becomes %3F, an ampersand becomes %26.

The same value, before and after
Rock & Roll (live) 100% Rock%20%26%20Roll%20(live)%20100%25

It exists because a URL is not just text — it is a structure, and a handful of characters are load-bearing. The ? starts the query, & separates parameters, / separates path segments. If a value contains one of those characters, something has to distinguish the value’s &from the structure’s. Percent-encoding is that something.

Why URL encoding is important

Because getting it wrong produces a URL that looks correct and behaves wrongly — which is the worst kind of bug.

One unescaped ampersand, two different meanings
https://example.com/search?q=Rock & Roll&page=2 // the server sees:q    = "Rock "Roll = ""page = "2"

Nothing errors. The page loads. The search is simply for the wrong thing, and someone spends an afternoon on it. The same class of mistake causes lost + tags in email addresses, redirect parameters that drop half their query string, and file paths that split at a space.

It also matters for safety. Unescaped input in a URL is one route to injection — parameters that alter other parameters, or redirect targets that point somewhere they should not. Encoding every value on the way in closes that off.

How URL encoding works

Percent-encoding is defined in terms of bytes, not characters. That single fact explains almost everything that surprises people about it.

  1. 1. Decide whether the character needs escaping. The unreserved set — A–Z a–z 0–9 - _ . ~ — never does.
  2. 2. Convert the character to UTF-8 bytes. ASCII characters are one byte; é is two; is three; an emoji is four.
  3. 3. Write each byte as % followed by two hex digits. One byte becomes three characters.
Why one emoji becomes twelve characters
🎉  →  F0 9F 8E 89  →  %F0%9F%8E%89 é   →  C3 A9        →  %C3%A9中  →  E4 B8 AD     →  %E4%B8%AD

Decoding runs the same steps backwards, which is why percent-encoding is lossless: decodeURIComponent — or the URL decoder — returns exactly the text you started with.

encodeURI() vs encodeURIComponent()

JavaScript gives you two functions, and choosing between them is the decision that matters most. The difference is what they consider “structure”.

The same URL through both functions
const url = "https://example.com/a b?q=1&r=2"; encodeURI(url)// https://example.com/a%20b?q=1&r=2      ← still a working URL encodeURIComponent(url)// https%3A%2F%2Fexample.com%2Fa%20b%3Fq%3D1%26r%3D2   ← now one value

encodeURI assumes it has been given a complete URL and leaves the separators alone, escaping only spaces and non-ASCII. Use it to make an already-structured URL safe.

encodeURIComponent assumes it has been given one value and escapes every reserved character. Use it for anything going inside a URL.

What you almost always want
const q = "Rock & Roll";const url = "https://example.com/search?q=" + encodeURIComponent(q);// https://example.com/search?q=Rock%20%26%20Roll

One footnote worth knowing: encodeURI escapes square brackets, even though RFC 3986 reserves them for IPv6 hosts. So [ becomes %5B in both modes.

Reserved URL characters

These are the characters that do a job in a URL’s structure. Inside a value, every one of them has to be escaped — the tool’s Characters tab lists the full set with its ASCII codes.

CharacterEncodedWhat it does
:%3ASeparates the scheme from the rest, and the host from the port.
/%2FSeparates path segments.
?%3FStarts the query string.
#%23Starts the fragment. Never sent to the server.
&%26Separates one query parameter from the next.
=%3DSeparates a parameter's name from its value.
@%40Separates credentials from the host.
+%2BMeans a space in form data, so a literal plus must be escaped.
%%25Starts an escape sequence, so it must escape itself.
Space%20Not allowed in a URL at all. Always escaped.

The opposite of reserved is unreserved: A–Z a–z 0–9 - _ . ~. Those are safe everywhere and are never escaped by anything. Everything not in either group is “unsafe” — characters such as spaces, quotes and angle brackets that have no job in a URL but get mangled by proxies, mail clients and log parsers if left alone. In a path segment built from a title, the better answer is usually to avoid them rather than escape them, which is what a slug generator does.

Common use cases

Query parameters

A search term with a space, an ampersand or a hash breaks the query string unless it is encoded. This is where most encoding bugs live.

REST APIs

Path segments carrying an id, an email address or a name need encoding — an unescaped slash silently becomes an extra path segment.

Forms

A form body is application/x-www-form-urlencoded, which is percent-encoding with spaces as +. Understanding the difference explains a lot of odd bugs.

Search URLs

Building a link to a search results page means encoding whatever the user typed, including quotes, plus signs and non-Latin scripts.

Email links

A mailto: link with a subject and body needs both encoded, and an address with a + tag needs the plus escaped or the tag is lost.

Redirect URLs

Putting one URL inside another as a ?next= parameter requires encoding the inner one completely, or its query string merges into the outer one.

Web development

Anywhere text crosses from your data into a URL: analytics parameters, share links, deep links, signed URLs and OAuth callbacks.

URL encoding best practices

  • Encode values, not URLs. Build the URL from its pieces and encode each value as you insert it. Encoding a finished URL is the single most common mistake, because afterwards nothing can tell a separator from data.
  • Encode once. Double encoding turns %20 into %2520, and the value arrives with a literal %20 in it. If you see %25 where you did not expect it, something encoded twice.
  • Prefer %20 to + unless you are building form data. A + in a path is a literal plus, not a space, and nothing will convert it back.
  • Use URLSearchParams where you can. In the browser and in Node it encodes each parameter correctly for you, and it is much harder to misuse than string concatenation.
  • Always encode a redirect target. A URL inside a ?next= parameter carries its own ? and &, which will merge into the outer query string otherwise — and that is an open redirect waiting to happen.
  • Keep URLs under about 2,000 characters. The standard sets no limit but browsers and servers do. If encoding pushes you past that, the data belongs in a request body.
  • Never encode a password by hand. Credentials in a URL are a bad idea regardless of encoding; use a header.

Frequently asked questions

Is this URL Encoder free?

Yes. Live encoding, both encoding modes, the character reference, search, copy and download are free, with no account and no limit on how much text you encode.

Is my data uploaded?

No. Encoding happens in your browser using its own built-in functions. Nothing is sent to a server, nothing is stored and nothing is logged. You can disconnect from the network after the page loads and it keeps working — which matters, because the things people encode are often API keys, tokens and customer data.

What is the difference between encodeURI and encodeURIComponent?

encodeURIComponent escapes everything that is not unreserved, including : / ? # [ ] @ & = + $ , and ;. Use it for a single value going inside a URL. encodeURI leaves the characters that give a URL its structure alone, so a complete address survives intact. The rule of thumb: encode a whole URL with encodeURI, and each value inside it with encodeURIComponent.

Which one should I use?

Almost always encodeURIComponent, because almost always you are encoding one value — a search term, an email address, a redirect target — rather than a whole URL. encodeURI is only right when you have a complete URL that is already structured correctly and just needs its spaces and non-ASCII characters escaped.

Can I encode Unicode characters?

Yes. Non-ASCII characters are converted to UTF-8 and each byte becomes its own escape, so é becomes %C3%A9, 中 becomes %E4%B8%AD and 🎉 becomes %F0%9F%8E%89. That is why an emoji produces four escapes: it is four bytes in UTF-8.

Does this support UTF-8?

Yes, and it is the default. Percent-encoding is defined in terms of bytes rather than characters, and UTF-8 is the encoding every modern server assumes. There is also a Keep Unicode option that leaves non-ASCII readable — see the next question.

What does the Keep Unicode option do?

It escapes only the ASCII characters that have to be escaped and leaves everything else readable, so München stays München rather than becoming M%C3%BCnchen. That produces an IRI (RFC 3987) rather than a URI. It is what a browser shows in its address bar, and it is much easier to read — but it must be converted to UTF-8 percent-encoding before being sent over the wire or stored in a database.

Should a space be %20 or +?

%20 is correct everywhere. The + convention comes from application/x-www-form-urlencoded, so it is right for form bodies and for query strings a form produced — but wrong in a path, where a + means a literal plus character and will not be decoded back to a space. When in doubt, use %20.

Can I encode query parameters?

Yes, and the important thing is to encode each value separately rather than the whole query string at once. Encoding the whole string would escape the & and = that separate the parameters, turning several parameters into one long value.

Is URL encoding reversible?

Yes. Percent-encoding is lossless: decodeURIComponent turns the output back into exactly the text you started with. The one thing to watch is spaces encoded as +, which a plain decoder will leave as a literal plus — form decoding converts them back first.

Can I encode long URLs?

Yes. There is no limit imposed by the tool, and text up to several megabytes encodes instantly. Note that browsers and servers do impose their own limits on URL length — around 2,000 characters is the safe ceiling in practice, so a very long encoded string usually belongs in a request body rather than in a URL.

Why is my encoded text so much longer?

Every escaped character becomes three characters: a percent sign and two hexadecimal digits. A non-ASCII character becomes three characters per UTF-8 byte, so an emoji goes from one character to twelve. Text made mostly of spaces and punctuation can easily triple in length.

What characters never need encoding?

The unreserved set: A–Z, a–z, 0–9, and - _ . ~ — plus ! * ' ( ) which JavaScript's functions also leave alone. Everything else is either reserved, meaning it has a job in the URL's structure, or unsafe, meaning it can be mangled in transit.

What happens if my text has an unpaired surrogate?

The tool reports it and names the position rather than failing. An unpaired surrogate is half of a character — usually the result of text being cut in the middle of an emoji — and it cannot be expressed as UTF-8, so it cannot be percent-encoded. JavaScript's own encodeURIComponent throws an unhelpful "URI malformed" error on this; here you get the character position instead.

Should I encode the whole URL or just parts of it?

Just the parts. Build the URL from its pieces, encode each value with encodeURIComponent as you insert it, and leave the separators alone. Encoding a finished URL is a common source of bugs, because you cannot tell afterwards which & was a separator and which was part of a value.

Are there keyboard shortcuts?

Ctrl/Cmd+Enter encodes immediately, Ctrl/Cmd+Shift+C copies the output, Ctrl/Cmd+Shift+D downloads it, Ctrl/Cmd+Shift+L loads the next example and Ctrl/Cmd+Shift+Delete clears the input. Ctrl/Cmd+F opens the search, and Escape closes it.

Popular tools

↑ ↓NavigateOpenEscClose