Skip to content

URL Encode/Decode

URL percent-encoding with component and URI modes locally.

Component vs URI
Component (encodeURIComponent) encodes query values and form fields—reserved characters like /?#&= become percent escapes. Full URI (encodeURI) preserves URI structure and only encodes characters invalid in a full URL.

URL Encode/Decode percent-encodes query values and full URIs using encodeURIComponent, decodeURIComponent, encodeURI, and decodeURI. Switch between component and URI modes, compare behavior, and copy results locally without uploading your strings.

How it works

Component mode uses encodeURIComponent and decodeURIComponent for individual values where reserved characters must become percent escapes. URI mode uses encodeURI and decodeURI to encode a full URI while preserving structural characters like slashes, question marks, and hashes.

Benefits

  • Component and URI modes side by side with clear guidance
  • Instant encode and decode with native browser APIs
  • Examples for query strings, paths, and Unicode text
  • Copy, download, and optional on-device history

Use cases

  • Encode search terms before building query strings
  • Decode percent-encoded values from server logs
  • Compare encodeURI versus encodeURIComponent output
  • Prepare internationalized URLs for manual testing

Best practices

  • Prefer encodeURIComponent for query parameter values
  • Use encodeURI only when encoding an entire URL string
  • Decode parameter values individually instead of whole URLs when debugging
  • Expect %20 for spaces in modern percent-encoded output

Common mistakes

  • Running encodeURIComponent on a complete URL and breaking its structure
  • Assuming + always means space in every context
  • Decoding twice and corrupting already decoded text
  • Using URL encoding where Base64 or HTML encoding is required

Privacy

All URL encoding and decoding happens locally in your browser. Your strings are not sent to ToolHub servers. Optional device history stores inputs on this device only if you enable it.

Frequently asked questions

What is the difference between encodeURIComponent and encodeURI?
encodeURIComponent encodes every character that is not unreserved, which makes it ideal for query values and form fields. encodeURI leaves URI delimiters like / ? # & = intact so an entire URL stays navigable.
When should I use component mode versus URI mode?
Use component mode for individual query values, form fields, and path segments. Use URI mode when you need to encode a mostly valid URL while preserving its structure.
Does URL Encode/Decode upload my input?
No. Encoding and decoding run entirely in your browser with native JavaScript functions.
Why does decode fail with a malformed percent sequence?
Percent-encoding must use two hex digits after each %. Sequences like %G or a trailing % are invalid and will throw during decodeURIComponent.
Is URL encoding the same as Base64?
No. URL encoding (percent-encoding) replaces unsafe ASCII characters with %XX sequences for URLs. Base64 represents binary data as text and serves a different purpose.
How are spaces encoded in query strings?
encodeURIComponent converts spaces to %20. Some legacy systems accept + for spaces in query strings, but %20 is the standards-compliant form.
Can I decode a full URL with query parameters?
Decoding an entire URL with component mode may fail because % sequences inside the query are decoded aggressively. Decode individual parameter values when possible.

Version 1.0.0 · Updated 2026-07-27 · 1 minute