URL Encoding Special Characters — Complete Percent Encoding Reference

💡URL encoding (percent encoding) replaces special characters with % followed by their hex code. Spaces become %20 or +. & becomes %26. Characters like ?, =, #, / have special meaning in URLs and must be encoded in query string values. Use encodeURIComponent() in JavaScript or the URL Encoder tool to encode strings correctly.

Examples

Space encoding

❌ Wrong

https://example.com/search?q=hello world

✅ Fixed

https://example.com/search?q=hello%20world
// or in forms: q=hello+world

Unencoded spaces break URL parsing. In query strings, + is also valid for spaces.

Ampersand in value

❌ Wrong

https://example.com?name=Tom&Jerry

✅ Fixed

https://example.com?name=Tom%26Jerry

& is the query parameter separator. In a value, it must be encoded as %26.

encodeURI vs encodeURIComponent

❌ Wrong

const url = encodeURI('https://example.com/search?q=a&b=c#hash');

✅ Fixed

// encodeURI: encode full URL (preserves ://  ? & = # /)
// encodeURIComponent: encode a value (encodes everything special)
const value = encodeURIComponent('a&b=c#hash');
const url = `https://example.com/search?q=${value}`;

Use encodeURIComponent for parameter values. Use encodeURI only for full URLs.

Email in URL

❌ Wrong

https://[email protected]

✅ Fixed

https://example.com?email=user%40example.com

@ has special meaning in URLs (user@host). In query values, encode it as %40.

Encode Instantly

URL Encoder/DecoderEncode or decode any URL string instantly →Open URL Encoder/Decoder →Base64 Encode/DecodeEncode binary data for URLs →Open Base64 Encode/Decode →

Real-World Usage

Query string with special characters

const q = 'hello world & more';
const url = `https://api.example.com/search?q=${encodeURIComponent(q)}`;
// https://api.example.com/search?q=hello%20world%20%26%20more

Always encode query parameter values — spaces and & break URL parsing.

Python requests library

import urllib.parse
params = {'q': 'hello world', 'filter': 'a&b'}
encoded = urllib.parse.urlencode(params)
# q=hello+world&filter=a%26b

urlencode handles encoding and joining parameters correctly.

Encoding path segments

const filename = 'my file (1).pdf';
const url = `/files/${encodeURIComponent(filename)}`;
// /files/my%20file%20(1).pdf

Encode path segments separately — encodeURIComponent is stricter than encodeURI.

Related Guides

Frequently Asked Questions

What characters must be URL encoded?

Reserved characters that have special URL meaning: space, ! " # $ % & ' ( ) * + , / : ; = ? @ [ ]. Also any non-ASCII characters. Safe characters that don't need encoding: A-Z a-z 0-9 - _ . ~

What is the difference between %20 and + for spaces?

Both represent spaces in URLs. %20 is the strict percent-encoding. + for space is only valid in query strings (application/x-www-form-urlencoded). Use %20 in path segments.

How do I decode a URL-encoded string in JavaScript?

Use decodeURIComponent(): decodeURIComponent('hello%20world') returns 'hello world'. For full URLs use decodeURI().

All tools run in your browser. Your data never leaves your device.