This URL encode decode calculator percent-encodes or decodes text with encodeURIComponent / decodeURIComponent behavior. The default text “hello world & more” in encode mode returns hello%20world%20%26%20more.
Use it when query values need safe transport. For unrelated numeric share checks, the percentage calculator stays a separate tool.
How the formula works
Encode mode runs encodeURIComponent on the full text string. Spaces become %20 and ampersands become %26, among other encodings. Decode mode runs decodeURIComponent to reverse percent sequences into characters.
Worked example
Start with hello world & more. Encode replaces each space with %20 and the ampersand with %26, yielding hello%20world%20%26%20more. Decoding that string restores the original phrase including spaces and &.
| Input | Value |
|---|---|
| Text | hello world & more |
| Mode | encode |
| Result | hello%20world%20%26%20more |
How to use the fields
- Text is the plain string or already encoded string you want to transform.
- Mode chooses encode or decode.
Why query values need encoding
In a query string, & splits parameters. If a value itself contains &, servers may read extra fields. Encoding the value protects the delimiter. Spaces also need a portable form; this tool uses %20 via encodeURIComponent.
Encoding the whole URL with the wrong helper can break scheme and host separators. Prefer component encoding for values, which is what this calculator targets.
Common mistakes
- Double encoding an already encoded string
- Decoding plain text that never used percent sequences
- Confusing encodeURIComponent with looser encodeURI behavior
- Forgetting that + as space is a form encoding convention, not what this encode path emits
Round trip practice
Encode the default phrase, copy the result, switch mode to decode, and confirm you recover hello world & more. Round trips build trust before you encode production data.
If a round trip fails, look for incomplete % sequences or plus signs introduced by a different system.
Classroom checks
Ask students which characters changed. Spaces and & should be obvious. Then add a question mark or equals sign and predict the encoded forms before running the tool.
Compare a safe token like hello (unchanged) with a risky token like a=1&b=2 so the delimiter lesson sticks.
Debugging pasted links
When a pasted link looks broken, decode the query value portion alone. Seeing spaces and punctuation return often reveals the intended human text. Encode again only the value, not the entire URL, when rebuilding.
Keep notes of mode and input. Encoded output without the source text is hard to review later.
Unicode awareness
Non ASCII characters become multi byte percent sequences under encodeURIComponent. That is expected. Decode restores the characters when the sequence is valid.
Do not hand edit percent bytes unless you know the UTF-8 layout; prefer re-encoding from plain text.
Query building checklist
Keep the base URL and parameter names in plain text. Encode only the values that may contain spaces, ampersands, or non ASCII characters. Paste those encoded values into the query, then test the finished link in a browser address bar.
If a partner tool shows plus signs for spaces, note that difference in your lab notebook. This calculator emits %20 under encodeURIComponent, which is the safer default for many APIs.
When debugging, change one character class at a time: first spaces, then ampersands, then punctuation. That sequence mirrors how the default example teaches %20 and %26.
Store before and after strings in a table for lab reports. Graders can verify encode and decode without guessing which mode produced which line.
Finally, encode the default phrase once more and confirm the result is still hello%20world%20%26%20more before you close the exercise.
Limitations
This page does not build full URLs, sign requests, or apply application/x-www-form-urlencoded plus rules. It focuses on encodeURIComponent and decodeURIComponent style transforms of the text field.