URL Encoder / Decoder

Encode a URL Component, Not an Entire Address by Habit

Percent-encoding gives reserved characters a safe textual representation inside a URI component. A space becomes %20, an ampersand becomes %26, and a non-ASCII character is encoded through its UTF-8 bytes. The crucial phrase is “inside a component.” This tool uses JavaScript’s encodeURIComponent() and decodeURIComponent(), which are designed for individual values or segments rather than preserving the structural delimiters of a complete URL.

If an API query value is red shoes & socks, encoding it produces:

red%20shoes%20%26%20socks

You can safely place that output after ?q= without the ampersand starting a second parameter. By contrast, encoding the entire string https://example.com/search?q=red shoes also encodes its colon, slashes, question mark, and equals sign. The result is useful only when the whole URL must itself become data, such as a redirect parameter; it is not a directly navigable replacement for the original address.

How the Two Modes Behave

Select Encode for raw text. The output updates immediately using encodeURIComponent. Characters with structural meaning in URLs are escaped, while a small unescaped set remains, including letters, digits, -, _, ., !, ~, *, ', and parentheses.

Select Decode for percent-encoded text. The tool calls decodeURIComponent, converting valid %HH byte sequences back to readable characters. Decoding %E2%9C%93%20ready returns ✓ ready because the three UTF-8 bytes represent the check mark and %20 represents a space.

The round button between input and output swaps the current output into the input and changes mode. This is an efficient round-trip check: encode a value, swap, and confirm that decoding restores the source. Clear empties the input, and Copy writes a non-empty, error-free output to the clipboard.

Query Parameter Workflow

Suppose a reporting endpoint accepts a filter expression as one value:

status=open&owner=Sam Lee

Used raw after ?filter=, the embedded ampersand would create a separate owner query parameter. Choose Encode and paste the expression. The output is:

status%3Dopen%26owner%3DSam%20Lee

Build the request as:

https://api.example.com/reports?filter=status%3Dopen%26owner%3DSam%20Lee

The server can parse filter as one value and decode its contents according to the API contract. Encode each key and value separately before joining them with literal = and &, or use a standard URL/query builder that does this automatically. Manual whole-query encoding often escapes separators that were supposed to remain structural.

Nested URLs and Redirect Parameters

A complete URL sometimes belongs inside another URL:

https://client.example/callback?tab=billing&notice=paid

If it is the value of a return_to parameter, encode the entire nested address because its ? and & must not control the outer query:

https%3A%2F%2Fclient.example%2Fcallback%3Ftab%3Dbilling%26notice%3Dpaid

The outer link can then contain ?return_to= followed by that output. Decode only once at each processing layer. If the nested URL has already been encoded and you encode it again, percent signs become %25, producing forms such as %253A. Double encoding is sometimes required by layered protocols, but it should be intentional and documented.

Paths, Slashes, and Fragments

For one dynamic path segment, encoding prevents embedded slashes from becoming path separators. Encoding reports/2026 Q3 yields reports%2F2026%20Q3. Whether a server accepts %2F inside a segment varies: routers, proxies, and security filters may decode or reject encoded slashes differently. Prefer framework route builders and test the complete request chain.

Do not encode literal slashes that define the intended path hierarchy. Build /users/ plus an encoded user identifier rather than passing /users/alice/profile wholesale through this component encoder.

Fragments follow the same component principle. If user text is becoming a fragment value, encode the text and retain the literal # delimiter outside it. Remember that fragments generally stay in the browser and are not included in HTTP requests.

Percent Encoding Versus Form Encoding

This tool emits %20 for a space because that is what encodeURIComponent() returns. HTML form query serialization and URLSearchParams commonly emit + for a space. Those conventions overlap but are not identical.

decodeURIComponent() does not turn a literal plus sign into a space. Decoding red+shoes returns red+shoes; decoding red%20shoes returns red shoes. If you are processing application/x-www-form-urlencoded data, use a form-aware parser or replace valid form-space plus signs before component decoding. Do not replace every plus blindly when + may be real data.

The encoder also escapes characters such as /, ?, :, @, &, and = because each may carry structural meaning outside a component. That behavior is why it is more aggressive than encodeURI(), which is intended to leave many full-URI delimiters intact.

Unicode and Browser String Limits

Percent encoding represents text as UTF-8 bytes. café becomes caf%C3%A9; the accented character occupies two encoded bytes. Emoji typically occupy four UTF-8 bytes and therefore expand to four %HH sequences. Encoded text can be much longer than its visible source, which matters for server, proxy, and browser URL-length limits.

JavaScript strings can also contain isolated UTF-16 surrogate code units. encodeURIComponent() throws for a lone surrogate because it is not valid Unicode text. If Encode shows Encoding error, the source may contain malformed string data copied from a broken transformation. Recreate or sanitize the text as valid Unicode before encoding.

Diagnosing Decode Errors

Invalid URL encoded string means decodeURIComponent() encountered malformed percent encoding or an invalid UTF-8 byte sequence. Common examples include a bare %, %2 with only one hexadecimal digit, %GG, or byte sequences that cannot decode as UTF-8.

Check the input at every percent sign. Each escape must contain exactly two hexadecimal digits, such as %2F. If the text is only partially encoded, that is acceptable as long as every % begins a valid escape; ordinary unescaped characters pass through unchanged.

Do not repeatedly press Decode hoping malformed text will repair itself. Determine whether the source is component encoding, form encoding, Base64URL, or another representation. A string beginning with eyJ may be token data rather than percent-encoded text, while Base64’s %-free alphabet needs a different decoder.

Practical Safety Notes

Encoding does not sanitize a value for every destination. It does not make untrusted input safe for HTML, SQL, shell commands, JSON, or HTTP headers. It only represents data within a URI component. Validate values according to their business rules and let the destination-specific API handle escaping for its own context.

Decoding an unknown value may reveal control characters or markup, but it does not execute them in this text area. Problems arise if decoded output is later inserted unsafely into another context. Treat copied output as untrusted data.

The conversion occurs in the browser component and does not require sending the input to a conversion endpoint. Clipboard writing occurs when Copy is pressed and may require browser permission.

Choosing the Right Operation

Use this encoder for one query key, one query value, a dynamic path segment, a fragment value, or a complete URL that is intentionally nested as data. Use a URL builder when assembling a whole address. Use a form parser for application/x-www-form-urlencoded, and use a Base64 or Base64URL utility for binary-to-text encodings.

When debugging an existing request, decode the individual suspicious value rather than the entire address. Decoding a whole URL can turn %26 back into & and visually blur whether it belonged to data or query structure. Preserve the original encoded string alongside any readable interpretation.

URL Encoder / Decoder FAQ

Why were https:// and ? encoded?

The tool uses encodeURIComponent, so it treats them as data characters. Encode individual components unless the complete URL is itself a nested value.

Why does a space become %20 instead of +?

%20 is component percent-encoding. Plus-for-space is associated with form/query serialization and requires a form-aware decoder.

Why did decoding %252F produce %2F rather than /?

The slash was encoded twice: %25 is a percent sign. A second decode yields /, but only do that if the producer intentionally used two encoding layers.

Are lowercase escapes such as %2f valid?

Yes. Hexadecimal digits are case-insensitive. Serializers often emit uppercase letters, but both decode to /.

Can I encode JSON as a query value?

Yes, for small payloads: encode the complete JSON string as one value. Consider size limits, logging exposure, and whether a request body is more appropriate.

Does Decode convert + into a space?

No. It uses decodeURIComponent, which preserves literal plus signs. Use form-decoding rules for form-encoded input.

Is percent encoding encryption?

No. Anyone can reverse it. It provides syntactic representation, not secrecy, integrity, or authentication.