URL encode and decode: %20, + and %2F examples

Decide whether you have a value or a full URL

The ampersand in a search phrase and the ampersand between two query parameters have different jobs. If a phrase such as red & blue is inserted into a URL without the right encoding, the application can interpret part of the phrase as URL structure instead of one value.

KitForma’s URL encoder offers component mode and complete-URL mode. Component mode is appropriate for a single query value or path segment. Complete-URL mode preserves separators such as slash, question mark, ampersand and hash; it does not guess which of those characters you meant as literal data.

Encode the smallest meaningful piece

For a search parameter, encode the search phrase first and then place the result after the parameter name. Do not encode the entire finished address as one component unless another system explicitly asks you to pass that address as a value inside a different URL.

Keep an unencoded copy of your sample so you can compare the result. Spaces, accented letters and reserved punctuation are useful test characters. KitForma uses the browser’s UTF-8 percent-encoding behavior and reports invalid Unicode input instead of silently inventing replacement text.

Value: red & blue
Component result: red%20%26%20blue
Address: https://example.com/search?q=red%20%26%20blue

Choose what a plus sign means when decoding

The decoder keeps + as a literal plus sign by default. It also offers form-style decoding, where a plus represents a space. Choose according to the system that produced the input. Changing this setting without checking the source can turn an intended plus into whitespace.

For complete query strings with several parameters, use the Query String Parser instead of decoding the whole string and then splitting it yourself. That parser follows form-style query handling and retains repeated keys, which helps avoid losing multiple values assigned to the same name.

A+B with literal-plus handling → A+B
A+B with form-style handling → A B
A%2BB with either handling → A+B

Stop after the expected decoding layer

A percent sign can itself be encoded. For example, decoding %252F once gives %2F; decoding the result again gives a slash. Those are different strings and can have different meanings when placed into a path. Repeated decoding is not a general cleanup operation.

If a value fails, look for a cut-off percent escape or invalid UTF-8 bytes. Compare with the original export before making changes. The tool does not fetch an address, confirm that a website exists, remove dangerous content or decide whether a link is safe to open.

Build query parameters without double encoding

Pass the original value to URLSearchParams. It serializes spaces as + and literal plus signs as %2B. Passing a value that was already percent-encoded encodes its percent signs again; %20 becomes %2520. This is a frequent reason a destination displays escape sequences as text.

Use getAll() when a parameter can repeat. Converting a query immediately into an object can discard repeated values. The example below keeps both tag entries and reads q back as the original text.

const params = new URLSearchParams();
params.set("q", "red & blue");
params.append("tag", "a+b");
params.append("tag", "café");
params.toString(); // q=red+%26+blue&tag=a%2Bb&tag=caf%C3%A9
params.get("q"); // red & blue
params.getAll("tag"); // ["a+b", "café"]

MDN: URLSearchParams and percent encoding ↗

Verify the result in the receiving context

The encoding tools process text on your device and allow up to 200,000 UTF-16 code units of input. Use a short harmless sample first, then inspect the exact generated value and test it where it will be consumed.

URL encoding and HTML escaping solve different problems. If an address is embedded in HTML, the surrounding markup also has its own escaping rules. Keep secret tokens and personal information out of examples you share. An encoded address remains readable to anyone who decodes it; it is not private simply because it contains percent signs.