What is URL encoding?

URL encoding (also called percent-encoding) is a method of converting characters into a format that can be safely transmitted in URLs. URLs have a limited character set defined by RFC 3986 – basically letters, digits, hyphens, periods, underscores, and tildes. Other characters (spaces, /, ?, #, &, =, special symbols, non-ASCII characters) must be encoded as %XX where XX is the hex code of the character’s byte value. This ensures URLs work consistently across all browsers, servers, and protocols. Without URL encoding, a URL like ‘example.com/search?q=hello world’ would be ambiguous – is ‘world’ part of the query or a separate URL parameter? Encoding to ‘example.com/search?q=hello%20world’ resolves all such ambiguity.

How to use this tool

1. Choose mode — Encode (text → percent-encoded) or Decode (percent-encoded → text).
2. Enter input — Type or paste your URL, query string value, or text. The tool encodes/decodes instantly.
3. Toggle ‘Component mode’ — ON: encodes URL structure chars (: / ? # & =) too – use for QUERY VALUES. OFF: preserves URL structure – use for COMPLETE URLs.
4. Copy or chain — Copy output to clipboard. ‘Use output as input’ chains operations.

Encode vs Component encode

JavaScript provides two encoding functions:

encodeURI() – encodes characters NOT allowed in URLs. PRESERVES URL structure characters (: / ? # & =). Use for COMPLETE URLs.

Example: encodeURI('https://example.com/path with space?q=hello world') → 'https://example.com/path%20with%20space?q=hello%20world'

encodeURIComponent() – encodes ALL characters except A-Z, a-z, 0-9, – _ . ! ~ * ‘ ( ). Use for query string VALUES that may contain URL structure characters.

Example: encodeURIComponent('hello world & foo=bar') → 'hello%20world%20%26%20foo%3Dbar'

Common encoded characters:

• Space → %20 (or + in query strings)
• ! → %21, # → %23, $ → %24, & → %26
• + → %2B (important!), / → %2F
• : → %3A, ; → %3B, = → %3D, ? → %3F
• @ → %40, [ → %5B, ] → %5D

Examples

• Spaces in URL: ‘hello world’ → ‘hello%20world’
• Email subject query string: ‘mailto:?subject=Hi from MavexTech!’ → ‘mailto:?subject=Hi%20from%20MavexTech%21’
• Search query with special chars: ‘C++ tutorial’ → ‘C%2B%2B%20tutorial’ (component mode)
• Unicode characters: ‘café’ → ‘caf%C3%A9’ (UTF-8 byte 0xC3 0xA9 percent-encoded)
• Sharing URL with another URL in query: ‘?url=https://example.com/path’ must encode the inner URL fully: ‘?url=https%3A%2F%2Fexample.com%2Fpath’

Tips & best practices

• Use encodeURIComponent() for query string VALUES – safest default for user input
• Use encodeURI() for entire URLs only – preserves /, ?, &, # structure
• Beware double-encoding bugs – if data is already encoded, encoding again breaks it. Always know the encoding state of your data
• Spaces in form data may be encoded as + or %20 depending on context – application/x-www-form-urlencoded uses +
• Don’t forget that # becomes %23 – if you have a hashtag in a URL parameter value, encode it!
• Modern URL APIs (URLSearchParams, fetch with URL object) handle encoding automatically – manual encoding is for raw strings
• For Unicode (Hindi, Chinese, Arabic chars), URL encoding uses UTF-8 byte sequence – so one character may become 3-4 % sequences

Limitations & notes

URL encoding is character-by-character based on RFC 3986. Some legacy systems use older standards or have bugs – test in your target environment. Form data encoding (application/x-www-form-urlencoded) is similar but uses + for spaces, not %20 – subtle difference. For very long URLs, browsers limit URL length to 2,000-8,000 chars depending on browser – encoding adds length quickly.

Frequently Asked Questions

What’s the difference between encodeURI and encodeURIComponent?

encodeURI preserves URL structure characters (:, /, ?, #, &, =) – use for entire URLs. encodeURIComponent encodes everything except basic alphanumerics – use for individual query string VALUES. If you’re putting user input into a URL parameter, use encodeURIComponent.

Why does + become %20 sometimes and stay + other times?

Two encoding contexts: URL path/query in general uses %20 for spaces. Form data with application/x-www-form-urlencoded content-type uses + for spaces. Both decode back to spaces. Most modern tools handle both interchangeably.

Why do I need to URL-encode special characters?

URLs have reserved characters (: / ? # & = etc.) that have special meaning. If your data contains them, they confuse parsers. Encoding wraps them as %XX so they’re treated as literal data, not URL structure. Without encoding, ‘username=user&pass=foo&bar’ is ambiguous – is &bar a parameter or part of the password?

Do URL fragment identifiers (#) need encoding?

Yes if appearing within data – # is a URL structure character (separates fragment from main URL). If your user’s name is ‘John#1’, the URL becomes problematic. Encode #1 to %231 in the value. Note that fragments are client-side only and never sent to the server, but encoding still matters for client-side JavaScript routing.

How do I encode non-English characters?

Non-ASCII characters are first encoded as UTF-8 byte sequences (1-4 bytes per character), then each byte is percent-encoded. So ‘café’ → ‘caf%C3%A9’ (é is 2 bytes in UTF-8: 0xC3 0xA9). encodeURI/encodeURIComponent handles this automatically.

Can I URL-encode for use in PHP / Python / Java?

Yes – every language has equivalent functions. PHP: urlencode() for components, rawurlencode() for full URLs (note the swap of names). Python: urllib.parse.quote() and quote_plus(). Java: URLEncoder.encode(). All produce the same output for the same input.

When should I NOT use URL encoding?

Don’t double-encode – encoding already-encoded data breaks decoding. Don’t encode the URL structure if you want to preserve it – use encodeURI not encodeURIComponent. Don’t encode safe characters (alphanumerics, – _ . ~) – it’s unnecessary and wasteful.

Related tools

Base64 Encoder · Hash Generator · Slug Generator