URL Encode / Decode

How To Use

1. Enter a URL component or query string that needs encoding or decoding.
2. Pick a Mode: Component (default, spaces become %20) for URL parts, or Form (spaces become +) for application/x-www-form-urlencoded payloads. Switching modes re-computes your last Encode/Decode result automatically.
3. Click Encode to percent-encode reserved characters.
4. Click Decode to turn an encoded URL back into readable characters.
5. After the first Encode/Decode, the output stays in sync automatically as you type or switch modes — no need to click again.
6. Use Copy output to copy the result.

Usage Example

Input string:

q = "hello world" & lang = en

Encoded output (Component mode):

q%20%3D%20%22hello%20world%22%20%26%20lang%20%3D%20en

In Form mode, the input a b&c=d encodes to a+b%26c%3Dd — the way HTML forms and libraries such as URLSearchParams serialize spaces and reserved characters. Decoding either output reproduces the original string.

Use Cases

URL encoding is a routine part of building and debugging web requests. Escape user-supplied search terms, addresses, or free-text fields before inserting them into a query string so the request does not break on spaces or special characters. Decode opaque redirect targets or tracking URLs to see what they really contain. Prepare form payloads and path segments for APIs that require percent-encoded input. Verify how a server-side framework encoded a value by pasting it back and decoding it. All of this happens locally, so you can inspect encoded URLs and payloads without exposing them to a third party.

Best Practices

• Encode only the variable parts of a URL (query values, path segments), not the scheme or host, so the URL stays valid.
• Use encodeURIComponent-style encoding for query values; it handles every reserved character and UTF-8 correctly.
• For HTML form bodies and application/x-www-form-urlencoded payloads, use Form mode so spaces are written as + the way forms and server frameworks expect.
• Decode before inspecting or logging a URL, but re-encode before redirecting so the destination receives a valid request.
• Be consistent about encoding across the stack — if your server expects raw values, avoid double-encoding them.
• Encoding changes how a value is written, not what it says. To actually edit a link — split it into parts, change query values in a table, or strip utm_* tracking — use the URL Parser & Query String Editor.

encodeURIComponent vs encodeURI vs escape()

JavaScript ships three functions whose names suggest they do the same job. They differ in exactly which characters they leave alone — and picking the wrong one is the most common source of broken query strings.

In practice encodeURIComponent is the right choice almost always: build the URL from known-safe parts and encode every variable value with it. encodeURI only makes sense when you have a full URL string that is broken in exactly one known place (usually spaces). The legacy escape() is deprecated and mishandles non-ASCII characters — replace it.

URL Encoding Character Reference (RFC 3986)

RFC 3986 splits characters into three groups. Unreserved characters (§2.3) never need encoding; reserved characters (§2.2) act as delimiters and must be encoded when they appear as data; everything else (space, non-ASCII, control characters) is always percent-encoded as UTF-8 bytes.

Try any character above in the tool: type it, switch modes, and watch Component mode write %20 where Form mode writes +.

Frequently Asked Questions

What does URL encoding do?

URL encoding (percent-encoding) replaces characters that are not safe in a URL, such as spaces and punctuation, with a percent sign followed by their hexadecimal byte value.

Does it handle Unicode URLs?

Yes. encodeURIComponent percent-encodes multi-byte UTF-8 characters correctly.

What is the difference between URL encoding and decoding?

Encoding (percent-encoding) turns unsafe characters such as spaces, quotes, and symbols into a percent sign followed by their hexadecimal byte value so they are safe in a URL. Decoding reverses that, converting an encoded string back into readable characters.

Should I encode the whole URL or only part of it?

Typically you encode only the component that holds user or variable content (query values, path segments), not the scheme, host, or reserved structure. Over-encoding breaks the URL; under-encoding risks malformed requests.

Why do spaces sometimes appear as + and sometimes as %20?

Both are valid, but in different contexts. Component mode uses %20, which is standard for path segments and query values. Form mode uses +, matching application/x-www-form-urlencoded request bodies. Switch between them with the Mode dropdown above.

Is my URL sent anywhere?

No. Encoding and decoding run entirely in your browser with native JavaScript functions. Nothing is uploaded.

How do I edit or remove the parameters of a URL?

This tool encodes and decodes strings — it does not edit URLs. To split a URL into parts, edit query parameters in a table, or remove utm_* tracking parameters, use the URL Parser & Query String Editor.

What is the difference between encodeURIComponent and encodeURI?

encodeURI is meant for a complete URL, so it deliberately preserves the characters that give a URL structure — / ? & = # : — and encodes only spaces and a few others. encodeURIComponent is meant for a single value that will be placed inside a URL, so it encodes everything structural except A-Z a-z 0-9 - _ . ! ~ * ' ( ). The rule of thumb: whole URL → encodeURI (rarely what you want), one value to embed → encodeURIComponent. The deprecated escape() function handles neither correctly — it mangles non-ASCII characters — and should be replaced by encodeURIComponent everywhere.

Why do I see %2520 instead of %20 (double encoding)?

%2520 means the string was encoded twice: the literal % of an already-encoded %20 was itself encoded to %25, producing %2520. This happens when a value that is already percent-encoded is passed through another layer that encodes it again — a template that runs encodeURIComponent over a pre-built query string, or a redirect that re-encodes its target. The fix is to encode exactly once, at the last moment before the value enters the URL, and to decode exactly once on the way out. Pasting %2520 into the decoder here and clicking Decode once yields %20; clicking Decode again yields a space — that is how you can tell how many layers you received.

How do I encode an ampersand (&) in a URL parameter?

If an & appears inside a parameter value, it must be encoded as %26, or the server will read it as the separator between two parameters and your value will be cut off at that point. For example ?q=a%26b is one parameter with value "a&b", while ?q=a&b is two. The same applies to = (%3D) and # (%23) inside values. Encoding the whole value with the Component mode on this page handles all three automatically.