URL Encoding and Decoding Explained (With Examples)

What URL encoding is

URLs can only contain a specific set of ASCII characters. Characters outside this set — spaces, special characters, non-ASCII Unicode — must be encoded before they can appear in a URL. URL encoding (also called percent encoding) replaces each unsafe character with a percent sign followed by its two-digit hexadecimal ASCII code.

Examples:

• Space → %20 (ASCII 32 = hex 20)
• # → %23 (ASCII 35 = hex 23)
• & → %26 (ASCII 38 = hex 26)
• = → %3D (ASCII 61 = hex 3D)
• + → %2B (ASCII 43 = hex 2B)

Decode any URL-encoded string instantly with the free URL encoder/decoder.

Which characters are safe in URLs?

RFC 3986 defines the characters that are safe in URLs without encoding:

• Unreserved characters (never need encoding): A–Z a–z 0–9 - _ . ~
• Reserved characters (safe in specific URL parts): : / ? # [ ] @ ! $ & ' ( ) * + , ; =

Reserved characters have special meaning in URLs — / separates path segments, ? starts the query string, # starts the fragment, & separates query parameters. When these characters appear as data (not structure), they must be encoded.

The query string problem

Query strings are where URL encoding matters most in practice. Consider a search URL:

https://example.com/search?q=hello world&category=tools

This URL is broken because:

1. The space in "hello world" is not valid — it should be %20 or +
2. The & separates query parameters, so the server sees q=hello world and category=tools as two separate parameters — which is actually correct here, but only by accident

If the search query itself contained an &character (searching for "cats & dogs"), the URL becomes:

https://example.com/search?q=cats & dogs

The server would see q=cats and an unnamed parameter dogs — the search query is broken. The correct encoded version:

https://example.com/search?q=cats%20%26%20dogs

JavaScript: encodeURI vs encodeURIComponent

JavaScript provides two encoding functions with different behavior — choosing the wrong one is a common bug:

encodeURI("https://example.com/search?q=cats & dogs")
// → "https://example.com/search?q=cats%20&%20dogs"
// Does NOT encode & because & is a reserved character
// The & still breaks the query string!

encodeURIComponent("cats & dogs")
// → "cats%20%26%20dogs"
// Encodes & correctly
// Safe to use as a query parameter value

The rule:

• Use encodeURI() for encoding a complete URL where you want to preserve the URL structure (don't encode ://, /, ?, &)
• Use encodeURIComponent() for encoding individual query parameter values or any part of a URL that might contain special characters

The corresponding decode functions are decodeURI() and decodeURIComponent().

The + vs %20 difference

Spaces can be encoded two ways in URLs:

• %20 — the standard percent encoding, valid everywhere in a URL
• + — shorthand for space, but only valid in query strings (not in path segments)

HTML forms traditionally encode spaces as + in query strings (application/x-www-form-urlencoded format). Most servers handle both. But if you're constructing URLs programmatically, use %20consistently — it's unambiguous regardless of URL position.

Unicode characters in URLs

Non-ASCII characters (Chinese, Arabic, emoji, accented characters) must be UTF-8 encoded first, then percent-encoded.

Example — the word "café":

• é is U+00E9 in Unicode
• UTF-8 encoding of U+00E9: bytes 0xC3 0xA9
• Percent encoded: %C3%A9
• Full encoded URL: example.com/caf%C3%A9

Modern browsers accept non-ASCII in the address bar and display them in readable form (internationalized domain names, Unicode paths). Behind the scenes, all the encoding is happening — the browser shows you the decoded display form.

IDN (Internationalized Domain Names) use a different encoding called Punycode for the domain itself: münchen.de becomes xn--mnchen-3ya.de at the DNS level.

Decoding URLs you find in the wild

When you copy a URL from a browser or see a URL in network logs, it may contain percent-encoded characters. Decoding it makes it readable:

Encoded:

https://example.com/search?q=best%20free%20tools%20for%20developers&sort=relevance

Decoded:

https://example.com/search?q=best free tools for developers&sort=relevance

Use the free URL encoder/decoder to quickly decode any URL you encounter in logs, analytics exports, or API responses.

Related tools

• Free URL Encoder/Decoder — encode and decode URLs instantly in your browser
• Free Base64 Encoder/Decoder — encode binary data as text (different from URL encoding)

Written by Achraf A., founder of TheFreeAITools.