URL Encoding Without the Guesswork

Start with the anatomy of a URL

https://example.com/search?q=red%20shoes&sort=price#results
___/   _________/_____/ _________/ ________/ _____/
scheme       host    path    query value   query      fragment

Characters such as :, /, ?, &, = and # can define URL structure. If the same characters are part of user data rather than separators, they may need percent encoding. Percent encoding represents a byte as % followed by two hexadecimal digits. A space encoded as UTF-8 is commonly written as %20.

Encode a complete URL or one component?

Encoding an entire URL with a component encoder can turn its structural separators into data. Encoding a raw query value with a whole-URI encoder can leave an ampersand or equals sign untouched, allowing the value to change the query structure. Decide what the input represents before choosing the operation.

Worked examples

Example 1: A search phrase

red shoes & socks

red%20shoes%20%26%20socks

The ampersand belongs to the search phrase, so it must not be interpreted as the separator before another query parameter.

Example 2: Building a query with JavaScript

const params = new URLSearchParams({
  q: "red shoes & socks",
  sort: "price:low-to-high"
});

const url = "https://example.com/search?" + params.toString();

This approach keeps data values separate from the punctuation used to assemble the URL.

Example 3: Unicode text

café

caf%C3%A9

The letter é becomes multiple encoded bytes in UTF-8. That is expected; a percent sequence represents bytes rather than a visible character count.

Why do some forms use a plus sign for spaces?

The application/x-www-form-urlencoded format commonly serialises a space as +. A literal plus sign then needs encoding as %2B. General URI percent encoding uses %20 for a space. Use the decoder that matches the format which produced the data; do not assume every plus sign means a space.

Five common mistakes

1. Double encoding

If red%20shoes is encoded again, the percent sign becomes %25, producing red%2520shoes. Decode once only when you know the value is encoded, and encode once at the boundary where raw data enters the URL.

2. Decoding the whole URL

Decoding a complete URL can turn encoded data back into separators and change its meaning. Decode individual components after parsing the URL.

3. Hand-building query strings

String concatenation makes it easy to forget one value. Use a URL or query-parameter API when your language provides one.

4. Treating encoding as security

Percent encoding is a transport representation, not encryption, access control or input validation. Anyone can decode the value.

5. Ignoring malformed sequences

A decoder may throw an error for incomplete sequences such as %E0%A4%A. Preserve the original input, identify the producer and avoid repeatedly “repairing” unknown data by trial and error.

A URL debugging checklist

• Identify whether you have a complete URL, path segment, query name, query value or fragment.
• Parse the URL before decoding individual pieces.
• Look for %25 where double encoding may have encoded a percent sign.
• Check whether a form-style encoder changed spaces to plus signs.
• Compare the raw value before encoding with the decoded value after one round trip.
• Remember that encoding does not make untrusted input safe for HTML, SQL, shell commands or another context.

ToolNoova's URL Encoder converts entered text with the browser's component-oriented JavaScript functions. It is useful for testing a value or reversing one layer of percent encoding. It does not crawl a URL, test whether a destination is safe or validate application-specific rules.