ToolMint
Developer Tools4 min readMay 17, 2026

How to Encode URL Special Characters ā€“ encodeURIComponent vs encodeURI

When you pass user input as a URL query parameter, spaces, ampersands, hash signs, and other special characters will break the URL unless they are encoded. JavaScript provides two built-in functions for this ā€” encodeURIComponent and encodeURI ā€” and they behave very differently. Using the wrong one is one of the most common sources of broken URLs in web development.

Which Characters Need to Be Encoded in a URL?

URLs can only contain specific ASCII characters defined in RFC 3986. All other characters must be percent-encoded: replaced by % followed by the two-digit hex value of their UTF-8 byte. Characters that are always safe (never encoded): Aā€“Z, aā€“z, 0ā€“9, and the 'unreserved' symbols - _ . ~ Characters that are 'reserved' (structural meaning in URLs): : / ? # [ ] @ ! $ & ' ( ) * + , ; = Whether to encode these depends on context ā€” inside a query value, & must be encoded as %26 or the parser splits the parameter. In the full URL structure, & is a parameter separator and should stay as-is. Common percent-encoded values: ā€¢ Space ā†’ %20 (or + in form-urlencoded) ā€¢ & ā†’ %26 ā€¢ = ā†’ %3D ā€¢ # ā†’ %23 ā€¢ + ā†’ %2B ā€¢ / ā†’ %2F

encodeURIComponent vs encodeURI: The Difference

encodeURIComponent(str): encodes everything except unreserved characters (Aā€“Z, aā€“z, 0ā€“9, - _ . ~). This includes all reserved characters like : / ? # & =. Use this for encoding individual query parameter values. encodeURI(str): encodes everything except unreserved characters AND reserved characters. It leaves : / ? # [ ] @ ! $ & ' ( ) * + , ; = intact. Use this for encoding a complete URL where you want to preserve the URL structure. Example: const title = 'Hello & World / 2025'; console.log(encodeURIComponent(title)); // 'Hello%20%26%20World%20%2F%202025' console.log(encodeURI(title)); // 'Hello%20&%20World%20/%202025' For a query parameter: https://example.com/search?q=' + encodeURIComponent(title) ā†’ https://example.com/search?q=Hello%20%26%20World%20%2F%202025 āœ“ If you use encodeURI instead: https://example.com/search?q=' + encodeURI(title) ā†’ https://example.com/search?q=Hello%20&%20World%20/%202025 āœ— The & breaks the query string into two parameters: q=Hello%20 and %20World%20/%202025

Form-Urlencoded: The Third Encoding Method

HTML form submissions with method='POST' and enctype='application/x-www-form-urlencoded' (the default) use a third encoding variant: ā€¢ Spaces are encoded as + instead of %20 ā€¢ All other special characters use standard percent-encoding This is why you see + in URL query strings from older HTML forms. Modern fetch() and axios requests using JSON bodies do not use form encoding ā€” only traditional form submissions and some legacy APIs. To decode + back to spaces on the server side, use decodeURIComponent on the value (which only handles %20) before splitting, or use a form body parser that handles the + conversion automatically. The ToolMint URL Encoder/Decoder supports all three methods so you can test the exact encoding your form or API will produce.

Practical Rules: Which Method to Use When

Encoding a query parameter value (user input, search terms, file names): use encodeURIComponent ā€¢ const url = '/search?q=' + encodeURIComponent(userQuery); Encoding a full URL you received from somewhere else (to pass it as a parameter): use encodeURIComponent ā€¢ const link = '/redirect?to=' + encodeURIComponent(fullUrl); Constructing a URL from trusted parts (known protocol, host, path): use encodeURI or template literals ā€¢ const url = encodeURI('https://example.com/path with spaces/page'); Encoding form data for a POST body: use URLSearchParams ā€” it handles encoding automatically ā€¢ const body = new URLSearchParams({key: value}); // produces correct form-urlencoded output Decoding a URL from user input or an API response: use decodeURIComponent ā€” it handles %20, %26, %2F, and all other percent sequences.

Try the tools mentioned in this guide

URL Encoder/DecoderEncode URLs with 4 percent-encoding methods, decode with 3 methods, and parse any URL into its components.JSON FormatterBeautify, validate, minify, and convert JSON to XML, CSV, or YAML ā€” with inline error location on parse failure.Base64 Encoder/DecoderEncode text or files (images, PDFs, binary) to Base64 and decode Base64 strings back to plain text ā€” UTF-8 safe.

Frequently Asked Questions

What does %20 mean in a URL?
%20 is the percent-encoding of a space character. The value 20 is the hexadecimal representation of 32, which is the ASCII code for space. You may also see + used for spaces in query strings from HTML form submissions ā€” this is the form-urlencoded convention.
Why does my URL break when it contains an & in a parameter value?
The & character is the query string parameter separator. If your parameter value contains &, it must be encoded as %26 so parsers treat it as part of the value rather than a separator. Use encodeURIComponent on all user-supplied query parameter values to prevent this.
How do I decode a URL that has been double-encoded?
Double-encoding happens when a URL is encoded twice ā€” %20 becomes %2520 (the % itself gets encoded as %25). To fix it: apply decodeURIComponent twice, or once if the double-encoding was applied only once. The ToolMint URL Decoder applies one round of decoding ā€” run it twice if needed.

Related Guides

What Is Base64 Encoding? A Plain-English Explanation with Examples

Base64 converts binary data into a string of 64 printable characters so it can travel through systems that only handle text. Here is exactly how it works and when to use it.

How to Validate JSON Online ā€“ Common Errors and How to Fix Them

Most JSON validation errors come from five causes: trailing commas, missing commas, single-quoted strings, unquoted keys, and mismatched brackets. Here is how to find and fix each one.

All guidesBrowse all tools