URL Encoder

Percent-encode URLs, URI components, and query strings with encodeURIComponent, encodeURI, or query string (+) mode.

Plain Input
0 charsencodeURIComponent
Encoded Output
%
output will appear here

Which encoding mode to use

The most common source of URL encoding bugs is using the wrong mode. This tool offers three modes matching the three JavaScript and web standards functions. Here is exactly when to use each:

componentencodeURIComponent()

Preserves (not encoded)

A–Z a–z 0–9 - _ . ! ~ * ' ( )

Encodes

Everything else, including : / ? # @ & = + , ; % spaces

Use when: Encoding a single value — a query parameter value, a path segment, or any text that will be placed inside a URL.

full URLencodeURI()

Preserves (not encoded)

All unreserved chars above, plus the URL structural chars: : / ? # [ ] @ ! $ & ' ( ) * + , ; =

Encodes

Spaces, non-ASCII characters, and % (when not followed by two hex digits)

Use when: Encoding a complete URL that already has correct structure. Does not encode the delimiters — use this only if the URL is fully formed.

query string (+)application/x-www-form-urlencoded (HTML forms)

Preserves (not encoded)

A–Z a–z 0–9 - _ . * (spaces become +)

Encodes

Everything else. Space is encoded as + instead of %20.

Use when: Submitting HTML form data or calling older APIs that expect + for spaces. This is the default encoding for <form method="POST">.

How common characters are encoded by mode

The same character encodes differently depending on the mode. This table shows the most important differences, referenced against RFC 3986:

Charactercomponentfull URLquery string (+)
Space%20%20+
/%2F/%2F
?%3F?%3F
&%26&%26
=%3D=%3D
#%23#%23
+%2B+%2B
@%40@%40
%%25%25%25
é (U+00E9)%C3%A9%C3%A9%C3%A9

Common encoding mistakes

These four mistakes account for most URL encoding bugs in production. Each shows the problem, the correct approach, and why it happens.

Using encodeURI() on a query parameter valuemost common
✗ problem
// Trying to encode a search query value
const q = "price=10&tax=0.5"
encodeURI(q)
→ "price=10&tax=0.5"  // unchanged — broken!
✓ correct
// Use encodeURIComponent for values, not the full URL
const q = "price=10&tax=0.5"
encodeURIComponent(q)
→ "price%3D10%26tax%3D0.5"  // correct

encodeURI() is designed for full URLs and deliberately leaves & = ? intact since they are URL structural characters. Using it on a value that contains those characters silently breaks the query string. Use component mode for any individual value.

Double-encoding an already-encoded string
✗ problem
// Input is already percent-encoded
const input = "hello%20world"
encodeURIComponent(input)
→ "hello%2520world"  // % became %25 — double-encoded
✓ correct
// Decode first, then re-encode
decodeURIComponent("hello%20world")
→ "hello world"
encodeURIComponent("hello world")
→ "hello%20world"  // correct

When a string is already encoded, encoding it again converts every % into %25. The status bar shows the number of encoded sequences — if a freshly encoded string contains %25, that is a signal the input was already percent-encoded.

Using + for spaces in a URL path
✗ problem
// Path with spaces encoded as +
/search/hello+world
→ Server receives: "hello+world" (literal plus)
✓ correct
// Path with spaces encoded as %20 (RFC 3986)
/search/hello%20world
→ Server receives: "hello world" (correct)

The + sign means "space" only in application/x-www-form-urlencoded (query strings and form data). In URL paths, + is a literal character. Use component mode (%20) for path segments and query string mode (+) only for form values.

Forgetting to encode non-ASCII characters
✗ problem
// Non-ASCII in a URL component
/users/René
→ Breaks on some servers; RFC 3986 requires ASCII
✓ correct
// Percent-encoded UTF-8 bytes
encodeURIComponent("René")
→ "Ren%C3%A9"
→ /users/Ren%C3%A9  // correct

RFC 3986 requires URIs to consist of ASCII characters only. Non-ASCII characters (accented letters, CJK, emoji) must be UTF-8 encoded first and then each byte percent-encoded. encodeURIComponent() does this automatically.

Related tools

  • URL Decoder — Reverse percent-encoding when debugging redirects, tokens, or copied query strings.
  • URL Slug Generator — Turn titles into SEO-friendly path segments after you encode special characters.

Frequently asked questions

What is URL encoding (percent-encoding)?

URL encoding converts characters that are not allowed or have special meaning in URLs into a safe representation. Each character is replaced by a percent sign (%) followed by two hexadecimal digits representing the character's UTF-8 byte value. For example, a space becomes %20 and é (U+00E9) becomes %C3%A9.

What is the difference between encodeURIComponent and encodeURI?

encodeURIComponent() encodes all characters except A–Z, a–z, 0–9, and - _ . ! ~ * ' ( ). Use it for individual values inside a URL. encodeURI() additionally preserves URL structural characters like : / ? # & = so it does not break the URL shape. Use it only on a fully-formed URL, never on a value.

When should I use + instead of %20 for spaces?

Use + for spaces only in application/x-www-form-urlencoded data — HTML form submissions and query strings on older APIs that expect this format. Use %20 (component mode) everywhere else, especially in URL path segments. A + in a path is a literal plus sign, not a space.

Which characters are safe in a URL without encoding?

RFC 3986 defines unreserved characters that never need encoding: uppercase and lowercase letters (A–Z, a–z), digits (0–9), and four symbols: hyphen (-), underscore (_), period (.), and tilde (~). All other characters must be percent-encoded when used as data values inside a URL component.

How does percent-encoding work for non-ASCII characters?

Non-ASCII characters are first converted to their UTF-8 byte sequence, then each byte is percent-encoded separately. For example, é (U+00E9) is 0xC3 0xA9 in UTF-8, which becomes %C3%A9. JavaScript's encodeURIComponent() handles this automatically.

What happens if I encode a string that is already encoded?

Double-encoding converts every % character into %25. For example, hello%20world becomes hello%2520world. The status bar in the output panel shows the count of percent-encoded sequences — if you see %25 in the output from encoding a string, the input was likely already encoded.

Is it safe to encode URLs in this tool?

Yes. All encoding runs in your browser using the native encodeURIComponent() and encodeURI() JavaScript APIs. No data is sent to any server. Open DevTools → Network to verify — there are zero outbound requests.