What Is URL Encoding and Why Does Your Link Look Like %20%3F%26

#javascript #beginners #tutorial #webdev

You copied a link and pasted it somewhere. It came out looking like this:

https://example.com/search?q=hello%20world%26more%3Dstuff

Or you tried to share a URL with spaces and it broke completely. Or an API you're calling requires parameters encoded in a specific way and you're not sure what that means.

URL encoding is one of those things every developer hits eventually. Here's what it is, why it exists, and how to handle it in seconds.

Why URLs Can't Have Spaces and Special Characters

A URL is made up of specific components — scheme, host, path, query string, fragment. Each component has rules about which characters are allowed.

The problem: many characters that are perfectly normal in text — spaces, ampersands, equals signs, question marks — have special meaning in a URL. A space breaks the URL. An ampersand separates query parameters. A question mark signals the start of the query string.

So when you need to pass a value that contains these characters, they need to be encoded into a safe format first. That safe format is percent-encoding, commonly called URL encoding.

How URL Encoding Works

Every character that can't appear raw in a URL is replaced with a percent sign followed by its two-digit hexadecimal ASCII code.

Character	Encoded	Why
Space	`%20`	Most common encoding you'll see
`&`	`%26`	Needed inside a value, not as a separator
`=`	`%3D`	Needed inside a value, not as key-value separator
`+`	`%2B`	`+` in query strings can mean space (older convention)
`/`	`%2F`	Inside a path segment, not as a path separator
`#`	`%23`	Raw `#` signals a fragment identifier

Encode and Decode URLs Instantly

You don't need to memorise percent codes or write code to handle this.

Go to URL Encoder/Decoder, paste your URL or text, and it encodes or decodes instantly.

To encode: Paste your raw text or URL → switch to Encode mode → copy the result.

To decode: Paste a percent-encoded URL → switch to Decode mode → read the human-readable version.

No account. No install. Runs entirely in your browser.

Encode vs Decode — When Do You Need Each?

You need to encode when:

Building a URL manually and the values contain special characters (e.g. ?name=John Doe → ?name=John%20Doe)
Constructing an API request where a parameter value contains &, =, or /
Creating a redirect URL that contains another URL as a parameter

You need to decode when:

You received a URL from a log or email and it's percent-encoded — you want to read the actual values
Debugging an API where the request URL looks like gibberish
Working with data that was stored URL-encoded

encodeURIComponent vs encodeURI — What's the Difference?

JavaScript gives you two encoding functions. Picking the wrong one is a common source of bugs.

encodeURI — encodes a full URL but preserves structural characters like :, /, ?, &, =, #. Use this when encoding a complete URL.

encodeURIComponent — encodes everything except letters, digits, and - _ . ! ~ * ' ( ). Use this when encoding a single query parameter value.

// Full URL — structure preserved, only the space is encoded
encodeURI("https://example.com/search?q=hello world&lang=en")
// "https://example.com/search?q=hello%20world&lang=en"

// Single value — &, = are encoded too
encodeURIComponent("hello world&lang=en")
// "hello%20world%26lang%3Den"

If you're encoding a query parameter value, encodeURIComponent is always the right choice.

Common Mistakes

Double encoding — encoding something that's already encoded. %20 encoded becomes %2520. Always decode first if you're not sure whether the input is already encoded.

Encoding the entire URL instead of just the value — encoding a full URL including https:// produces https%3A%2F%2F... which is broken as a link. Only encode the values inside query parameters.

Forgetting to encode form values — if you're building query strings manually, every value needs to be encoded. One missed special character breaks the whole request.

Using + for spaces in the wrong context — in HTML form encoding, + means space. In a general URL context, + is a literal plus sign. %20 is the safe, unambiguous way to encode a space everywhere.

Try It Now

Next time you see a URL full of percent signs — or you need to build one — use the encoder/decoder to handle it instantly.

URL Encoder/Decoder → ultimatetools.io

No install. No account. Works on any device.

Originally published on Medium. Part of Ultimate Tools — a free, privacy-first browser toolkit with 40+ tools for PDFs, images, QR codes, and developer utilities.