URL Encoder & Decoder

URL Encoding Explained: Percent Encoding, Reserved Characters, and the encodeURI vs encodeURIComponent Distinction

URL encoding (officially called percent-encoding, defined in RFC 3986) is the mechanism that allows arbitrary text — including special characters, spaces, non-English characters, and binary data — to be safely included in a Uniform Resource Locator. Since URLs can only contain a limited subset of ASCII characters, any character outside this "safe" set must be converted to its byte representation using a percent sign (%) followed by two hexadecimal digits. For example, a space becomes %20, a hash becomes %23, and the Japanese character 日 becomes %E6%97%A5 (three bytes in UTF-8).

Understanding URL encoding is essential for web developers, API designers, and anyone who works with HTTP. Incorrect encoding leads to broken links, security vulnerabilities (injection attacks), and garbled text. This tool encodes and decodes text using JavaScript's encodeURIComponent() and decodeURIComponent(), which implement the RFC 3986 standard and handle full Unicode input correctly.

URL Character Categories: Reserved, Unreserved, and Unsafe

RFC 3986 divides characters into three categories that determine when encoding is required.

Unreserved Characters (never need encoding)

Reserved Characters (have special meaning in URLs)

encodeURI() vs encodeURIComponent(): The Critical Difference

JavaScript provides two built-in URL encoding functions, and using the wrong one is one of the most common web development bugs.

encodeURI() is designed for encoding a complete URI. It leaves reserved characters that have structural meaning in URLs untouched: : / ? # [ ] @ ! $ & ' ( ) * + , ; =. Use this when you have a full URL and just want to fix unsafe characters like spaces. Example: encodeURI("https://example.com/my page.html") produces https://example.com/my%20page.html — the scheme (https:) and path separator (/) are preserved.

encodeURIComponent() is designed for encoding a single component of a URI — typically a query parameter value. It encodes all reserved characters because within a parameter value, characters like &, =, and # should be treated as literal text, not as URL structure. Example: encodeURIComponent("Tom & Jerry") produces Tom%20%26%20Jerry — the ampersand is encoded so it will not be mistaken for a parameter separator.

The rule of thumb: use encodeURIComponent() for query parameter values and path segments, and encodeURI() only when you have a full URL and want to make it safe. This tool uses encodeURIComponent(), which is correct for the most common use case — encoding text for use in a URL parameter.

How Percent Encoding Works with Unicode (UTF-8)

When encoding non-ASCII characters, the text is first converted to its UTF-8 byte representation, and then each byte is percent-encoded individually. A single Unicode character can produce one to four percent-encoded bytes. For example, the Euro sign (€) has the UTF-8 byte sequence E2 82 AC, which URL-encodes to %E2%82%AC. Chinese characters typically require three bytes: 中 (meaning "middle/China") encodes to %E4%B8%AD. Emoji characters require four bytes: the thumbs-up emoji encodes to %F0%9F%91%8D.

This UTF-8 based encoding is standardized in RFC 3986 (the current URI standard) and IRI (Internationalized Resource Identifiers, RFC 3987). Older systems sometimes used other encodings like Latin-1 or Shift-JIS for URL encoding, which led to mojibake (garbled text) when systems disagreed on encoding. Today, UTF-8 is the universal standard for URL encoding, and all modern browsers and servers use it.

Spaces in URLs: %20 vs + (Plus Sign)

Both %20 and + can represent a space character in URLs, but they have different scopes and histories. The + convention comes from the application/x-www-form-urlencoded content type used by HTML forms (defined in the HTML specification, not the URI specification). In this format, spaces are encoded as + instead of %20. This only applies to query string parameters submitted by HTML forms.

The percent-encoding %20 is defined by RFC 3986 and works everywhere in a URL — scheme, authority, path, query, and fragment. For maximum compatibility, use %20 in path segments and + or %20 in query strings. JavaScript's encodeURIComponent() always produces %20 for spaces, while URLSearchParams produces + for spaces in query parameters.

When to Encode: Practical Scenarios

Building API URLs: When constructing URLs with user-supplied query parameters, always encode parameter values. If a user searches for "Tom & Jerry", the query string must be ?q=Tom%20%26%20Jerry, not ?q=Tom & Jerry (which would be parsed as two separate parameters).

Redirects and links: When generating redirect URLs that include other URLs as parameters (e.g., ?redirect=https://example.com/page?id=5), the embedded URL must be encoded to prevent its reserved characters from being interpreted as part of the outer URL structure.

File paths in URLs: Filenames with spaces, special characters, or non-ASCII characters need encoding. A file named "Q&A Report.pdf" must be accessed as Q%26A%20Report.pdf in the URL.

OAuth and authentication flows: OAuth 2.0 requires strict percent-encoding of callback URLs and scope values. Incorrect encoding is one of the most common OAuth integration failures.

URL Encoding in Different Languages

Common URL Encoding Mistakes

Double-encoding: Encoding an already-encoded string produces garbled results. %20 becomes %2520 (the percent sign itself gets encoded). If your URLs contain %25, you are likely double-encoding.

Using encodeURI() for parameter values: encodeURI() does not encode &, =, or + characters, so using it for query parameter values will break URLs when the value contains these characters. Always use encodeURIComponent() for parameter values.

Not encoding at all: Building URLs through string concatenation without encoding user input creates both broken URLs and security vulnerabilities (URL injection, open redirects). Always encode dynamic values.

Encoding characters that do not need encoding: Letters, digits, hyphens, underscores, periods, and tildes are unreserved and never need encoding. Over-encoding wastes bytes and reduces URL readability.

How This Tool Works

This encoder uses JavaScript's encodeURIComponent() for encoding and decodeURIComponent() for decoding, which implement RFC 3986 percent-encoding with full UTF-8 Unicode support. Type text in the encode field to see the percent-encoded result instantly, or paste an encoded string to decode it back to readable text. All processing happens in your browser — no data is sent to any server, making this tool safe for encoding sensitive parameters like API keys or authentication tokens.