# URL Encoder & Decoder

- **URL:** https://codeasystem.com/calculators/developer/url-encoder-decoder/
- **Category:** developer
- **Description:** Percent-encode query-string components or whole URLs, and decode escaped strings back; malformed escapes are caught cleanly.
- **Primary output:** Percent-encoded (component): a%20b%26c%3Dd

## Inputs
- Text / URL (name: `text`, type: textarea, example: search term or https://example.com?q=…)
- Mode (name: `mode`, type: select)
- Direction (name: `direction`, type: select)

## Outputs
- Percent-encoded (component): a%20b%26c%3Dd
- Reserved characters kept (full URL mode): :/?#[]@!$&'()*+,;=
- Spaces become: %20

## Formula / methodology
```
percent-encoding: unsafe byte → %XX (two hex digits)
```

Component mode applies encodeURIComponent semantics: every character with reserved URL meaning (?, &, /, =, spaces…) becomes %XX percent escapes; the right choice for values embedded inside query strings.

Full-URL mode applies encodeURI semantics, preserving structural characters so an entire URL remains navigable while illegal characters (spaces, non-ASCII) still get escaped. Decoding reverses either form and reports malformed percent sequences explicitly.

## Assumptions & limitations
- Encoding produces uppercase hex escapes.
- Spaces become %20 rather than “+”; the plus form belongs to form-body conventions.
- Decoding assumes UTF-8 percent sequences.

## How to use
1. **Choose component or full URL**; Query-parameter values want component mode; complete URLs want full mode.
2. **Encode, or decode an escape sequence**; Switch direction to read what an encoded string actually says.
3. **Watch for decode errors**; A lone % not followed by two hex digits is reported instead of crashing.

## Example
Encoding the component “a b&c=d” escapes the space and both reserved characters, producing a value safe to embed in any query string.

Result for these inputs:

```
Percent-encoded (component): a%20b%26c%3Dd
```

## About this calculator
### Component vs full URL, concretely

encodeURIComponent applied to a whole URL escapes the slashes and question mark too, wrecking the address; that is why it belongs on parameter VALUES. encodeURI keeps the structural characters intact so the overall shape survives. Pick per position, not by habit.

### Where bugs hide

- Double encoding; %2520 means %20 was encoded twice
- + vs %20; servers decode “+” as space only in form bodies
- Unencoded & inside values truncates parameters
- Non-ASCII needs UTF-8 bytes before escaping

## FAQs
### Which mode should I use for fetch() query params?

Component mode on each individual key and value, then join them yourself; never full-URL mode for fragments.

### Why do I see both %20 and + out there?

%20 is standard percent encoding; + is a legacy form-body convention where it means space. They are not interchangeable in query strings.

### My decode failed; why?

Malformed input: typically a literal % sign that was itself never encoded. The error points this out; fix the upstream encoding.

### Are emoji handled?

Yes; they encode as multiple UTF-8 bytes, each becoming its own %XX escape, and decode back losslessly.

## Related calculators
- [HTML Entity Escaper & Unescaper](https://codeasystem.com/calculators/developer/html-entity-escaper/)
- [Base64 Encoder & Decoder](https://codeasystem.com/calculators/developer/base64-encoder-decoder/)
- [JSON Formatter & Validator](https://codeasystem.com/calculators/developer/json-formatter-validator/)

---
Last updated: 2026-08-23 · Version: 1.0.0 · [HTML version](https://codeasystem.com/calculators/developer/url-encoder-decoder/)