URL Encoder: Percent-Encode Links and Query Text

Ever pasted a link with a space in it and watched it break? A web address cannot hold raw spaces, symbols, or accented letters. The URL Encoder turns those characters into safe percent codes, so your link or query value travels cleanly.

This tool is for developers, marketers, and anyone building links by hand. You type text, pick a mode, and the percent-encoded result appears below. The whole job runs in your browser.

Table of Contents

• What the Tool Does
• How to Use It, Step by Step
• The Two Encoding Modes
• Worked Example
• How to Read the Results
• Which Characters Get Encoded
• Common Mistakes to Avoid
• Limitations and Assumptions
• FAQs About the URL Encoder

What the Tool Does

The tool takes your text and replaces unsafe characters with percent codes. Each unsafe byte becomes a percent sign and two hex digits, such as %20 for a space.

• Input box: one text area where you paste a URL or a query value.
• Mode choice: two radio buttons, encodeURIComponent for a query value or encodeURI for a full address.
• Encoded result: a read-only box that updates as you type.
• Copy button: copies the encoded text to your clipboard.

The three cards at the top are labels, not inputs. They name the mode, the standard, and the output format.

How to Use It, Step by Step

1. Paste your text into the URL / Query String Input box.
2. Pick a mode. encodeURI (Full Address) is selected by default.
3. Switch to encodeURIComponent (Query Param) when you encode a single value.
4. Read the Encoded Percent-Encoded Result box, which refreshes on every keystroke.
5. Press Copy to place the result on your clipboard.

The copy button shows Copied when it works. The Encode URL button runs the same action. You rarely need it, since the result updates while you type.

The Two Encoding Modes

Both modes keep letters, digits, and a small set of safe marks. They differ on the characters that give a URL its structure, like the slash and the question mark.

encodeURIComponent encodes those structure characters too. Use it for a single value, such as one query parameter. encodeURI leaves them alone, so a full web address stays usable.

A space always becomes %20 in both modes. An ampersand becomes %26 only in the component mode.

Worked Example

Priya wants to put the search term salt & pepper into a link. She needs it as one query value, so she picks the component mode. The tool opens in the full-address mode, so she switches it first.

The component mode encodes the ampersand, so the value will not split the query. The full-address mode keeps the ampersand, which would start a new parameter.

Now take a whole link, https://shop.test/items?c=home & garden. In the default encodeURI mode the output is https://shop.test/items?c=home%20&%20garden. The scheme and slashes stay intact, and only the space changes.

How to Read the Results

The result box shows your text after encoding. Each %XX pair stands for one byte of the original character in UTF-8.

A space reads as %20, an ampersand as %26, and a slash as %2F. Accented letters use more than one pair, since they take more than one byte. The word José becomes Jos%C3%A9, because the accented e is two bytes.

If your text holds a broken character, the result box clears. A message then appears below the input. It names the problem, such as a lone surrogate from a bad copy.

Which Characters Get Encoded

Both modes leave these untouched: letters, digits, and the marks hyphen, underscore, period, tilde. They also keep the marks exclamation, star, apostrophe, and the round brackets.

The component mode then encodes every other symbol, including the slash, question mark, equals sign, hash, at sign, plus, and ampersand. The full-address mode keeps those structure marks so a link still works.

A percent sign is always encoded to %25. That matters when your text already holds percent codes, which the next section covers.

Common Mistakes to Avoid

The first mistake is encoding a full URL with the component mode. It turns https:// into https%3A%2F%2F, which no browser can open. Use encodeURI for whole links, and component mode for single values.

The second mistake is encoding text that is already encoded. The tool treats the percent sign as plain text and turns %20 into %2520. It now shows a note when it spots existing percent codes, so decode the text first if you are unsure. The URL decoder tool reverses a percent-encoded string.

The third mistake is mixing up URL encoding with HTML escaping. They solve different problems. To make text safe inside a web page, use the HTML entity encoder instead.

Limitations and Assumptions

• The tool only encodes. To go the other way, use a decoder.
• It uses the browser functions encodeURIComponent and encodeURI, which follow the older RFC 2396 rules. They do not encode the marks exclamation, star, apostrophe, or round brackets, even though RFC 3986 reserves them. The Standard card reads RFC 2396.
• Running the tool twice on the same text double-encodes it, turning %20 into %2520. A note appears when the input already holds percent codes.
• Very malformed text, such as a lone surrogate, clears the result and shows a short message instead of codes.
• The copy button tries your clipboard first, then a fallback, and tells you whether it worked.
• Very large pastes still encode on every keystroke. A note warns that this can feel slow.
• Nothing you type is sent to a server or stored. The work happens on your device.

For another text transformation, the Base64 encoder packs data into a different safe format. To split a link into its parts, try the URL parser. You can find more in the developer tools hub.

FAQs About the URL Encoder

This calculator gives general estimates only and is not professional advice. Reviewed for general accuracy by Prof. Dr. Khalil Mudassar, PhD.