URL Encoder & Decoder

Percent-encode or decode URLs and query values with encodeURIComponent (component) or encodeURI (full URL)—auto-convert, swap, and parse decoded links locally.

By Muhammad Abdullah Rauf · Founder, EverydayTools.proUpdated 2026

What is a URL encoder / decoder?

A URL encoder converts text into percent-encoded form (%XX) so reserved characters do not break URL structure; a decoder reverses those sequences back to plain text.

Percent-encoding (RFC 3986) represents bytes of a UTF-8-encoded character as % followed by two uppercase or lowercase hex digits. It is required whenever a character would otherwise be interpreted as syntax (e.g. & between query params) or is outside the unreserved set.

JavaScript exposes encodeURIComponent for arbitrary components (aggressive encoding) and encodeURI for full URI strings (preserves :, /, ?, # delimiters). decodeURIComponent and decodeURI are the inverses when strings are well-formed.

Encode parameter values with encodeURIComponent in application code; use this page to preview the same transforms offline.

Quick answers

Concise answers for common searches — definitions, steps, and comparisons.

What is the difference between encodeURIComponent and encodeURI in JavaScript?

encodeURIComponent encodes everything except unreserved characters (A–Z a–z 0–9 - _ . ~), making it suitable for encoding a single query parameter value or path segment. It encodes: & → %26, = → %3D, / → %2F, + → %2B, ? → %3F, # → %23. encodeURI encodes the same characters but preserves structural URL characters (: / ? # [ ] @ ! $ & ' ( ) * + , ; =) so the result remains a valid URL. Rule: use encodeURIComponent for parameter values — encodeURIComponent('hello world & page=2') → 'hello%20world%20%26%20page%3D2'. Use encodeURI only to lightly sanitize a complete URL string you already control.

How do you detect and fix double-encoding in a URL?

Double-encoding happens when already-encoded text is encoded again — %20 becomes %2520 (the % is encoded as %25). Detection: look for %25 followed by two hex digits (e.g., %2520, %2526, %253D). These are % signs that were themselves percent-encoded, indicating the input was already encoded before being passed to an encoder. Fix: decode the string once before encoding, or check if the input contains % followed by two hex digits and skip encoding in that case. In JavaScript: if (/%[0-9A-F]{2}/i.test(input)) { /* already encoded */ } to detect before blindly encoding again.

How should redirect_uri be percent-encoded in OAuth 2.0 authorization requests?

In OAuth 2.0 authorization requests, the redirect_uri parameter value must be percent-encoded when included as a query parameter. The full redirect URI (including its own query string) must be encoded with encodeURIComponent. Example: redirect_uri=https://app.example.com/callback?state=xyz becomes redirect_uri=https%3A%2F%2Fapp.example.com%2Fcallback%3Fstate%3Dxyz. Common mistakes: (1) encoding only the domain but not the path and query string, (2) using encodeURI instead of encodeURIComponent and leaving ? and = unencoded, (3) double-encoding if the HTTP client library also encodes parameters. The redirect_uri value in the token exchange request must exactly match the encoded form registered with the authorization server.

When must plus sign (+) be decoded as space in query strings?

application/x-www-form-urlencoded (HTML form POST bodies and some server parsers) treats + as space. RFC 3986 query strings in modern APIs use %20 for space and treat + as literal plus. decodeURIComponent does not convert + to space. Symptom: OAuth state or search terms show plus instead of space after decode — the data came from form encoding. Fix: replace + with %20 before decodeURIComponent, or use URLSearchParams which handles form semantics. encodeURIComponent encodes space as %20, never + — correct for building OAuth query strings in JavaScript.

How to use URL Encoder & Decoder

  1. Pick encode or decode and scope

    Choose Encode or Decode. Use Component when transforming one value (search text, token). Use Full URL when you need to lightly encode an entire href while keeping / and ? meaningful.

  2. Paste input

    Paste the plain string to encode or the percent-encoded string to decode. Auto-convert runs after you pause typing unless you disable it.

  3. Review output and parsed parts

    Check the output panel for percent-encoded or decoded text. When decoding a full URL, inspect protocol, host, path, and query in the parsed breakdown.

  4. Copy or swap

    Copy the result to your clipboard, or swap input/output to chain encode→decode operations before pasting into code or OAuth settings.

Who uses URL Encoder & Decoder?

Common real-world scenarios where this tool saves time.

Query string encoding

Encode user-submitted search terms, names, or addresses before appending them to a URL to prevent injection and parsing errors.

Debugging redirect URLs

Decode percent-encoded redirect_uri or callback parameters in OAuth flows to verify they point to the correct destination.

API endpoint construction

Encode path segments and query parameters when building URLs programmatically for REST API calls.

Reading analytics URLs

Decode complex UTM-tagged or tracking URLs to understand campaign parameters without manual parsing.

Workflow guides

Step-by-step chains that connect related tools for common tasks.

Decode → inspect OAuth redirect_uri → verify token

  1. Paste the percent-encoded redirect_uri or callback URL here and decode it to read the plain-text destination.
  2. If the decoded URL contains a token parameter, paste the token into JWT Decoder to inspect claims and check the exp timestamp.

Encode credentials → build API request URL

  1. Encode the username:password pair using Base64 Encoder/Decoder to produce the value for the Authorization: Basic header.
  2. Encode each query parameter value here with encodeURIComponent before appending to the request URL — never use encodeURI for parameter values.

URL Encoder & Decoder examples

Space and reserved characters

Input

hello world & q=1

Output

encodeURIComponent → hello%20world%20%26%20q%3D1

Spaces become %20; & becomes %26; = becomes %3D so the value can sit inside a query string safely.

Decode percent sequences

Input

hello%20world

Output

decodeURIComponent → hello world

%20 is the byte for space in UTF-8; decoding restores the original Unicode text.

JSON query value

Input

{"id":1}

Output

encodeURIComponent → %7B%22id%22%3A1%7D

Curly braces and quotes are reserved; encoding packs the JSON blob into one query value.

How it works

Component mode calls encodeURIComponent / decodeURIComponent on the entire pasted string—appropriate for a single query value or path segment. Full URL mode calls encodeURI / decodeURI so structural slashes and delimiters remain usable in a live link.

Formula

space → %20 · & → %26 · + → %2B (in query values, + may mean space in application/x-www-form-urlencoded)

Limitations

  • Double-encoding can happen if you paste already-encoded text and encode again—decode first when unsure.
  • Invalid % sequences (incomplete hex) throw on decode; fix or strip them before decoding.

Reference tables

Percent-encoding reference

Common characters developers encode in query values.

CharacterEncodedNotes
Space%20Also appears as + in application/x-www-form-urlencoded bodies
&%26Must encode when it is data inside a value
=%3DMust encode when it is data inside a value
+%2BLiteral plus in a query value
/%2FOften needed inside a path segment value
?%3FWhen the question mark is literal data

When to use URL Encoder & Decoder vs related tools

Related toolUse this tool whenUse related tool when

Best practices

Always use encodeURIComponent for query parameter values

Decode for display, encode for transmission

Handle + vs %20 based on context

Validate decoded output before use

Encode once, decode once

Common mistakes to avoid

Calling encodeURI on a single query value

encodeURI leaves & and = unencoded; those break values. Use encodeURIComponent for each value, then join with &.

Encoding an entire URL with encodeURIComponent

You will encode slashes and colons—use Full URL (encodeURI) or encode only the pieces that are data.

Mixing + with %20 semantics

HTML forms may send spaces as +; decodeURIComponent treats + as +, not space—normalize based on your source.

Troubleshooting

Double-encoded output (%2520 instead of %20)

Fix:

decodeURIComponent throws 'malformed URI sequence'

Fix:

Spaces decoded as + instead of %20

Fix:

Non-ASCII characters produce unexpected percent sequences

Fix:

Encoded URL is rejected by server as invalid

Fix:

Advertisement

Frequently Asked Questions

What is URL encoding?

URL encoding (percent-encoding) replaces characters that are not allowed in URLs — like spaces, ampersands, and special symbols — with a % followed by their hexadecimal code. For example, a space becomes %20. It is defined in RFC 3986.

encodeURI vs encodeURIComponent?

encodeURIComponent encodes almost everything except A–Z a–z 0–9 - _ . ~ — use it for query values. encodeURI targets full URI strings and preserves characters that structure URLs (/, ?, :, #, etc.).

Should I encode the full URL or just the query string?

Encode individual query parameter values, not the full URL. Encoding the full URL with the wrong API can also encode the protocol (://), slashes, and domain — making it invalid. Encode only the values after the = sign.

Is my data uploaded to a server?

No. All encoding and decoding runs locally in JavaScript in your browser. Your URLs, tokens, and query strings never leave your device.

Why does %20 sometimes appear as + in URLs?

HTML forms submit data as application/x-www-form-urlencoded, which uses + to represent spaces in the request body. In URL path segments and RFC 3986-compliant query strings, spaces are %20 and + means a literal plus sign. Use %20 in URLs you construct in code; decode + as space only when processing HTML form submissions.

What characters must always be percent-encoded in a URL?

Characters outside the unreserved set (A–Z, a–z, 0–9, -, _, ., ~) must be encoded when they appear as data rather than syntax. Key characters: space (%20), & (%26), = (%3D), + (%2B), ? (%3F), # (%23), / (%2F), : (%3A). encodeURIComponent handles all of these automatically.

Is this tool free?

Yes — completely free with no signup or usage limits.

Privacy, accuracy, and trust

Privacy

All URL encoding and decoding runs locally in your browser using native encodeURIComponent / decodeURIComponent—never uploaded to a server.

Accuracy

Output matches JavaScript's built-in encode/decode APIs—the same strings your application code would produce.

For development and debugging—validate redirect URIs and untrusted URLs before use in production redirects.

Part of Developer Tools

Related Tools

More free tools for the same workflow.

URL Builder

Free URL builder — add a base URL, append query parameters, auto-encode values, and copy the complete URL string. Perfect for API testing, UTM links, and affiliate tracking. No signup.

Base64 Encoder & Decoder

Free Base64 encoder and decoder — encode any text or data to Base64 and decode Base64 strings back to readable text. Supports URL-safe Base64 variant. No signup needed.

Advertisement

Reviewed by EverydayTools Editorial Team on 2026-05-20.