URL Encode / Decode

Uniform Resource Identifiers (URIs) rely on a restricted set of ASCII characters to represent address locations across internet protocols. When non-ASCII characters, binary data, or structural delimiters are transmitted inside query parameters or path segments, they must be safely transformed using percent-encoding (RFC 3986).

When using our URL Encode / Decode tool, character transformation is executed directly within your client runtime using native ECMAScript URI functions. The string processing converts raw UTF-8 octets into percent-escaped hexadecimal triplets without transmitting data to remote web servers.

Characters in a URI fall into two primary categories: reserved characters (such as ?, &, =, /, :, and #) which serve as structural delimiters, and unreserved characters (alphanumeric characters plus -, _, ., and ~) which can be safely transmitted without modification. Any character outside the unreserved set must be converted into a percent sign followed by two hexadecimal digits representing its UTF-8 byte value.

Selecting the correct encoding function depends on whether you are escaping a complete target address or an individual query key-value pair:

| Function / Mode | Reserved Delimiters Escaped | Preserved Structural Characters | Target Use Case | Example Input → Output |

| --- | --- | --- | --- | --- |

| encodeURIComponent | Yes (Escapes : / ? # & = + $) | Unreserved set: A-Z a-z 0-9 - _ . ! ~ * ' ( ) | Query string parameter values, path segments, fragment data | `https://site.com?q=a&b` → `https%3A%2F%2Fsite.com%3Fq%3Da%26b` |

| encodeURI | No (Preserves : / ? # & = + $ , ;) | Reserved delimiters + Unreserved set | Full, valid URLs with non-ASCII or space characters in paths | `https://site.com/search?q=hello world` → `https://site.com/search?q=hello%20world` |

| decodeURIComponent | Decodes all valid %XX triplets | Converts %20 or + to space character | Parsing raw query strings into readable application state | `q=hello%20world%20%26%20more` → `q=hello world & more` |

Technical Warning: Passing a full URL through `encodeURIComponent` destroys its structural delimiters, turning `https://example.com` into `https%3A%2F%2Fexample.com`. Use `encodeURI` for full URLs and `encodeURIComponent` strictly for parameter values.

Converting characters between raw text and percent-encoded hexadecimal format requires four simple operational steps:

Select processing mode: Choose either Encode or Decode depending on your input data.

Paste raw payload: Enter your string, full URL, or query parameter payload into the editor input field.

Toggle structural encoding mode: When encoding full URLs, enable `encodeURI` mode to preserve critical delimiters like `:`, `/`, `?`, and `&`.

Inspect and copy output: The converted string updates instantly as you type; click the copy icon to capture the result.

Percent-encoding does not operate directly on UTF-16 JavaScript string code units; it processes the underlying multi-byte UTF-8 representation:

ASCII Character Encoding: Standard ASCII characters map directly to single hexadecimal bytes. For example, a space character (ASCII 32) becomes `%20`.

Multi-Byte UTF-8 Sequences: Non-ASCII unicode characters generate multiple percent-encoded triplets. The character `é` (UTF-8 bytes `0xC3` and `0xA9`) encodes to `%C3%A9`. Complex characters like the emoji `🚀` map to four triplets: `%F0%9F%9A%80`.

Form-Urlencoded Space Handling: In traditional `application/x-www-form-urlencoded` POST bodies and query strings, spaces are historically represented as a plus sign (`+`) rather than `%20`.

Automatic Plus Normalization: Our decoding algorithm normalizes all literal `+` symbols into `%20` before running the ECMAScript `decodeURIComponent` parser, ensuring legacy form fields decode correctly into readable spaces.

Developers frequently encounter broken URLs or runtime exceptions caused by improper percent handling:

| Failure Mode / Exception | Underlying Cause | Impact on Application | Prevention / Resolution |

| --- | --- | --- | --- |

| Malformed URI Sequence (`URIError`) | `%` followed by non-hexadecimal characters (e.g. `%ZZ` or `%1G`) | `decodeURIComponent()` throws a fatal JS exception | Validate that `%` signs are followed by two valid hex digits (`0-9`, `A-F`) or escape literal `%` as `%25` |

| Unescaped Ampersand Truncation | Including raw `&` or `=` inside parameter values | Parser misinterprets data as new key-value pairs | Always process individual parameter values through `encodeURIComponent` before assembling query strings |

| Double Encoding (`%2520`) | Passing an already percent-encoded string through an encoder | Transforms `%20` into `%2520`, corrupting URLs | Track string encoding state in application pipelines to avoid double-escaping |

| High Surrogate Isolation | Incomplete UTF-16 surrogate pairs in multi-byte unicode | Parser fails when encountering split unicode points | Ensure string manipulation functions do not truncate multi-byte emoji or character pairs mid-sequence |

Percent-encoding forms a foundational step when working across interconnected web development and API management tools:

Formatting serialized JSON in query parameters: Convert structured JSON objects into URL-safe strings before embedding them in GET request parameters using JSON Formatter.

Handling binary-to-text data transfers: For sending binary payloads over text-only protocols where percent-encoding creates excessive overhead, encode your payload with Base64 Encode / Decode.

Debugging authentication tokens: Parse and verify percent-encoded OAuth callback parameters and authentication signatures alongside JWT Decoder.

Constructing regular expression parameter routes: Validate dynamic URL routing patterns and percent-encoded regex captures using Regex Tester.

Handling percent-encoding properly is essential across several web infrastructure contexts:

OAuth2 Redirect URIs: Escaping `redirect_uri` parameters in authorization requests to prevent security bypasses and path injection.

Deep Link Tracking Parameters: Safely embedding UTM campaign metadata, tracking tags, and referral URLs containing special characters.

API Query String Construction: Encoding user-generated search terms, filter strings, and multi-word tags sent via REST API endpoints.

S3 Object Key Paths: Transforming file names containing spaces, accented characters, or symbols into valid Amazon S3 web access paths.

Q: What is the difference between encodeURIComponent and encodeURI?

A: `encodeURIComponent` escapes all characters except letters, digits, and basic unreserved symbols (`- _ . ! ~ * ' ( )`). Use it for query parameter values. `encodeURI` preserves URL structural characters like `:`, `/`, `?`, `#`, `&`, and `=`, keeping full URLs functional.

Q: Why does decoding fail with a URIError on inputs like %ZZ?

A: In percent-encoding, every `%` symbol must be followed by two valid hexadecimal digits (`0-9`, `A-F`). Sequences like `%ZZ` are invalid. When encountering malformed sequences, the underlying engine throws a `URIError` and clears the output.

Q: How does the tool handle plus signs (+) when decoding?

A: In web form data (`application/x-www-form-urlencoded`), spaces are often encoded as `+`. When decoding, our tool converts `+` characters into `%20` before parsing, ensuring form-encoded strings return clean spaces.

Q: Is my URL data sent to an external server when encoding or decoding?

A: No. All encoding and decoding operations execute entirely in your local browser runtime. No data is uploaded or transmitted across the network.

Q: How are non-ASCII characters like unicode or emojis encoded?

A: The input string is converted into its underlying UTF-8 byte sequence. Each UTF-8 byte is then converted into a percent-escaped hexadecimal triplet (e.g., `🚀` becomes `%F0%9F%9A%80`).

Escape query parameters, fix malformed URL strings, and parse percent-encoded payload data instantly using our client-side URL Encode / Decode tool.

Explore complementary encoding, formatting, and web development utilities on our platform:

Format and validate raw or decoded JSON payloads using JSON Formatter.

Convert binary files and strings to safe ASCII text via Base64 Encode / Decode.

Inspect decoded authorization headers and OAuth state payloads using JWT Decoder.

Test URL path matching and query string extraction rules with Regex Tester.