What this tool does
URLs may only contain a limited set of characters, so anything else has to be percent-encoded. This matters far more often than it looks: a space, an ampersand inside a value, a plus sign, or a non-ASCII character will silently break a request or return the wrong record if left unencoded.
How it works
Percent-encoding replaces each disallowed byte with a percent sign followed by two hexadecimal digits. A space becomes %20 and a forward slash %2F. The critical detail is which level you encode at: encodingURIComponent escapes characters that are illegal anywhere in a URI, while encodingURI leaves reserved delimiters such as /, ?, and & intact so the structure of the URL survives.
The distinction matters for query strings. Building a URL by concatenating raw user input lets an ampersand in a value terminate the parameter early, and a plus sign in a value gets read as a space by many servers. Encoding each value separately with the component-level encoder is what makes a value containing & or = safe.
Decoding is the inverse, but it is not always a clean round trip. A literal plus sign and an encoded space are both read as a space by form-style decoders, because that convention comes from HTML form submission. Decode twice or once depends on how the value was encoded.
Worked example
Putting a search term containing a space, an ampersand, and a plus into a query string safely.
- Encoding the component 'A&B + C'
- Space → %20, ampersand → %26, plus → %2B
- Result: A%26B%20%2B%20C
The full query value is A%26B%20%2B%20C, so the server receives exactly the term you typed instead of splitting it into separate parameters.
Accuracy and limitations
- Double-encoding is a common bug. Encode once; if a value arrives already encoded, decode it before encoding again.
- The plus-as-space convention differs between form decoding and general URI decoding, which produces confusing mismatches.
- Path segments and query values need different treatment. Encoding a whole URL at once will escape the delimiters that give it structure.
Frequently asked questions
- When should I use encodeURIComponent rather than encodeURI?
- For a single value that will sit inside a URL, such as a query parameter or path segment, use encodeURIComponent. It escapes everything that could break out of that position. Use encodeURI only for a complete URL where you need the slashes and question marks preserved.
- What is the difference between %20 and +?
- Both can represent a space, but they belong to different conventions. Percent-encoding is the general URI standard. The plus form comes from HTML form submission, and many form decoders read a literal + as a space while a general URI decoder does not. Use %20 unless you are specifically dealing with a form body.
- Why did my parameter get cut in half?
- Because a value containing an ampersand was not encoded, so the server treated the & as the start of the next parameter. Encode each value before assembling the query string, and never concatenate raw input into a URL.
- Is this reversible?
- Yes, decoding undoes it. Note that a value containing a literal + may come back as a space if it went through a form-style decoder, because that is genuinely ambiguous in the encoding and not a fault in the decoder.