URL Encoder / Decoder

Encode or decode URLs and query string parameters instantly.

Understanding URL Encoding

URL encoding, also known as percent-encoding, is a mechanism defined in RFC 3986 for representing characters in a Uniform Resource Identifier (URI) that are not allowed or have special meaning within the URL syntax. When a character cannot be directly represented in a URL, it is replaced with a percent sign (%) followed by two hexadecimal digits representing the character's byte value in UTF-8 encoding. For example, a space character becomes %20, an ampersand becomes %26, and a forward slash becomes %2F.

URLs can only contain a limited set of characters from the ASCII character set. The unreserved characters that can appear literally in a URL are: uppercase and lowercase letters (A-Z, a-z), digits (0-9), hyphens (-), periods (.), underscores (_), and tildes (~). All other characters, including spaces, international characters, and reserved characters like ? & = # /, must be percent-encoded when used as data (rather than as URL delimiters).

JavaScript provides two built-in functions for URL encoding: encodeURIComponent() and encodeURI(). The key difference is scope: encodeURIComponent() encodes everything except unreserved characters, making it ideal for encoding individual query parameters. encodeURI() preserves characters that have special meaning in URLs (like : / ? # @ &), making it suitable for encoding an entire URL where you want to preserve the URL structure. Using the wrong function is a common source of bugs in web applications.

Common Encoding Scenarios

  • Query Parameters: Values in ?key=value pairs must be encoded. A search query "cats & dogs" becomes q=cats%20%26%20dogs.
  • International Characters: Non-ASCII characters like accented letters or CJK characters are encoded into their UTF-8 byte sequences.
  • API Requests: When building API URLs programmatically, parameter values containing special characters must be encoded to prevent parsing errors.
  • Form Submissions: HTML forms with method="GET" automatically URL-encode field values before appending them to the action URL.
  • Redirect URLs: When passing a URL as a parameter (e.g., redirect_url=), the entire URL must be encoded to prevent the nested URL's characters from being interpreted.

Reserved vs. Unreserved Characters

TypeCharacters
UnreservedA-Z a-z 0-9 - . _ ~
Reserved: / ? # [ ] @ ! $ & ' ( ) * + , ; =
Space%20 (or + in form data)

encodeURIComponent vs encodeURI

FunctionEncodesPreservesUse Case
encodeURIComponent()All except A-Z a-z 0-9 - _ . ! ~ * ' ( )Only unreserved charsIndividual query parameter values
encodeURI()All except unreserved + reserved URL chars: / ? # @ & = + $ etc.Entire URLs where structure should be preserved

Frequently Asked Questions

What is the difference between %20 and +?

Both represent a space character, but in different contexts. %20 is the standard percent-encoding for spaces in URLs as defined by RFC 3986. The + sign represents a space only in the application/x-www-form-urlencoded format used by HTML form submissions. In query strings, both are commonly accepted, but %20 is the universal standard.

When should I use encodeURIComponent?

Use encodeURIComponent() when encoding individual values that will be placed into a URL, such as query parameter values or path segments. It encodes characters like & = ? / that would otherwise be interpreted as URL delimiters. This is the correct choice 90% of the time when building URLs programmatically.

Can URL encoding handle Unicode characters?

Yes. JavaScript's encoding functions first convert the string to UTF-8 bytes, then percent-encode each byte. For example, the character "cafe" with an accent becomes caf%C3%A9 because the e-accent character is represented as two UTF-8 bytes (0xC3 0xA9). This ensures full Unicode support for international URLs.

Is my data sent to a server?

No. All encoding and decoding operations happen entirely in your browser using JavaScript's built-in encodeURIComponent(), decodeURIComponent(), encodeURI(), and decodeURI() functions. No data is transmitted, stored, or logged anywhere.