AbraCalc

URL Encoder / Decoder

Encode or decode URLs and URI components live in your browser. Supports encodeURI and encodeURIComponent.

Pure browser JavaScript — uses native encodeURI / decodeURI APIs.

Embed this tool on your site
Cite this tool

APA

AbraCalc. (2026). URL Encoder / Decoder [Online calculator]. Retrieved from https://abracalc.com/app/url-encoder-decoder/

BibTeX

@misc{abracalc-url-encoder-decoder, author = {AbraCalc}, title = {URL Encoder / Decoder}, year = {2026}, howpublished = {\url{https://abracalc.com/app/url-encoder-decoder/}} }

Did this tool answer your question?

How to use this tool

  1. Paste a URL or raw text.
  2. Click Encode or Decode (or Encode/Decode component for query-string values).
  3. The result updates live as you type.

Encode or decode URLs and URI components live in your browser. Supports encodeURI and encodeURIComponent.

How it works

URLs may only contain a limited set of safe characters. Special characters such as spaces, ampersands, and non-ASCII text must be percent-encoded (e.g. a space becomes %20, and & becomes %26) before they can appear in a URL. This tool encodes or decodes URL strings instantly as you type.

The tool supports two standard functions: encodeURI, which preserves characters that have special meaning in a full URL (such as /, ?, and #), and encodeURIComponent, which encodes those characters too -- useful for encoding individual query parameter values.

Decoding reverses the process, converting percent-encoded sequences back to readable characters. This is handy for reading obfuscated redirect URLs, debugging API request logs, or understanding link parameters.

All processing is local -- nothing is sent to a server. You can safely paste URLs that contain authentication tokens or private data.

Worked example

Encode a search query to use in a URL parameter

  1. You want to build a URL like: https://example.com/search?q=hello world&category=books & more.
  2. Paste each parameter value (e.g. 'hello world') into the encoder.
  3. Select encodeURIComponent.
  4. Copy the encoded value (hello%20world) and insert it after the '=' in your URL.
  5. Repeat for each parameter value.

A properly encoded URL: https://example.com/search?q=hello%20world&category=books%20%26%20more

Common mistakes to avoid

  • Double-encoding a URL by running an already-encoded string through the encoder again, turning %20 into %2520.
  • Using encodeURI on a query parameter value that contains '&' or '=' -- those characters will not be encoded and will break the query string structure. Use encodeURIComponent instead.
  • Forgetting to encode the '#' character in a fragment identifier when it is meant to be part of a parameter value.

Key terms

Percent-encoding
A mechanism for representing characters in a URL by replacing them with a '%' followed by their two-digit hexadecimal ASCII code (e.g. space = %20).
encodeURIComponent
Encodes all characters that are not alphanumeric or the set - _ . ! ~ * ' ( ). Use this for encoding individual query parameter values.
encodeURI
Encodes a full URL, leaving characters that are structurally meaningful in URLs (such as /, ?, #, &, =) unencoded.

Frequently asked questions

Encode vs Encode component?
encodeURI preserves characters like /,?,& that have meaning in URLs. encodeURIComponent encodes everything — use it for individual query-string values.

References & sources