How to URL Encode Query Parameters Without Breaking Values

When a search value contains an ampersand, plus sign or space, encode the value before inserting it into a query string. Otherwise, characters that belong to the text can be interpreted as URL separators.

This walkthrough uses the URL Encoder and Decoder to build and inspect a link for the fictional search phrase tea & biscuits + coffee. The goal is to recover that exact phrase after parsing the URL.

Keep the URL structure separate from its values

In a query such as ?q=tea&page=2, the ampersand separates two parameters. If the ampersand belongs inside the search phrase, it needs a different representation: %26.

The tool offers two encoding types. Component (encodeURIComponent) encodes separators inside an individual value. Full URI (encodeURI) preserves characters used for URL structure. Use Component for the value in this example. MDN’s encodeURIComponent reference explains that difference.

Choosing Full URI for a raw query value can leave an ampersand unescaped. Choosing Component for an entire address encodes its structural punctuation too. Decide which piece of data you are handling before selecting the mode.

Encode a value containing spaces, an ampersand and a plus

1. Open the URL Encoder and Decoder.
2. Set Mode to Encode.
3. Set Encoding type to Component (encodeURIComponent).
4. Leave Treat + as a space (form style) unchecked.
5. Enter tea & biscuits + coffee in Input and select Convert.

The result is:

tea%20%26%20biscuits%20%2B%20coffee

Here, %20 represents each space, %26 represents the ampersand, and %2B represents the literal plus sign. Insert the result as the value of q, leaving the query separators in place:

https://example.com/search?q=tea%20%26%20biscuits%20%2B%20coffee&page=2

This is a demonstration address. The encoder prepares text; it does not establish that the example host has a search feature or accepts these parameter names.

Parse the finished link and compare the original text

Paste the complete demonstration URL into Query string parser and select Parse parameters. The tool should show two rows:

• q: tea & biscuits + coffee
• page: 2

Check both the number of parameters and the decoded value. A result that looks plausible can still lose part of a phrase if a separator was handled incorrectly. The parser is a text inspection step; it does not send the link to the destination server or test that server’s behavior.

Understand when a plus sign means a space

Form-style query serialization commonly writes spaces as +. A literal plus must then be encoded as %2B so it survives decoding. For our phrase, the form-style representation is:

tea+%26+biscuits+%2B+coffee

To decode that value in the conversion panel, select Decode, keep the Component type, check Treat + as a space (form style), and select Convert. The original phrase returns. Without that option, the conversion panel leaves literal plus characters in the input unchanged.

The separate query parser uses form-style plus handling. Do not assume a plus means a space in every part of every URL. MDN’s URLSearchParams documentation covers query serialization and the need to preserve literal plus signs.

Avoid encoding a value twice

If you encode blue shoes once with component rules, you get blue%20shoes. Encoding that already encoded text again turns the percent sign into %25, producing blue%2520shoes. One decode then returns the intermediate string, not the original space.

A URL-building API may already handle encoding. For example, give URLSearchParams the original value:

const params = new URLSearchParams();
params.set("q", "tea & biscuits + coffee");
params.set("page", "2");
console.log(params.toString());
// q=tea+%26+biscuits+%2B+coffee&page=2

Do not run the value through encodeURIComponent before passing it to this API. Also avoid repeatedly decoding an unfamiliar value until it “looks right”: nested encodings can be intentional. Work out what the receiving system expects.

Check the destination before sharing

For a real link, confirm that the destination supports the parameter names, open it and inspect the resulting search or filter. Then check that the original value still appears correctly. For campaign tracking links, use the newsletter UTM workflow to keep campaign names consistent as well as correctly encoded.