Why URL Encoding Matters
URLs only allow a limited set of characters to appear literally. Spaces, ampersands, hash signs, and non-ASCII letters must be converted to percent-encoded sequences so servers and browsers parse the address correctly.
A query like ?search=hello world is ambiguous — the space could break parsing. The encoded form ?search=hello%20world is unambiguous. URL Encoder applies encodeURIComponent, the standard JavaScript function for encoding individual parameter values.
encodeURIComponent in Practice
This tool encodes every character except A-Z a-z 0-9 - _ . ! ~ * ' ( ). That aggressive set is intentional: when you place a value inside ?key=value, nothing in the value should be mistaken for a delimiter.
Common transformations you will see:
| Character | Encoded |
|-----------|---------|
| Space | %20 |
| & | %26 |
| = | %3D |
| / | %2F |
| ? | %3F |
| @ | %40 |
When to Encode Each URL Part
Treat a URL as assembled pieces rather than one string to encode wholesale:
- Query parameter values — Encode with this tool before appending to
?name=. - Path segments — Encode each segment (folder or filename) separately; leave
/between segments unencoded. - Fragment identifiers — Encode the fragment content if it contains special characters.
- Full URLs for redirect parameters — Often require double-layer planning: encode the inner URL's components, then encode the whole value if it sits inside another query parameter.
URL Encoding in API Development
When building fetch calls or constructing webhook callbacks, paste the raw parameter value here first. A common mistake is manually replacing spaces with %20 while leaving & or = unencoded inside the value — those characters will truncate or corrupt the query string.
For OAuth redirect URIs and signed callback URLs, encode each dynamic segment before concatenation. Keep a decoded copy in your source code comments so future maintainers understand the original intent.
Worked Examples
| Raw parameter value | encodeURIComponent output | Why it matters |
|---|---|---|
| rock & roll | rock%20%26%20roll | Unencoded & would split the query into a fake roll parameter |
| https://vertexssolutions.com/pdf?ref=nav | https%3A%2F%2Fvertexssolutions.com%2Fpdf%3Fref%3Dnav | Safe to pass as a ?redirect= query value without breaking the outer URL |
| 100% organic! | 100%25%20organic! | Escapes literal % to %25 so decoders do not throw URIError |
Encoding vs. HTML Escaping
URL encoding and HTML entity escaping solve different problems. If you embed a URL inside an HTML attribute, you may need both: percent-encode the URL components, then HTML-escape quotes in the attribute value. To reverse an encoded string during debugging, switch to the URL Decoder, test URL patterns in the Regex Tester, or hash canonical query strings in the Hash Generator.