URL Encode/Decode

About URL Encode/Decode

How Percent Encoding Works

RFC 3986 defines which characters are allowed in URLs without encoding. Unreserved characters (A-Z, a-z, 0-9, -, _, ., ~) pass through unchanged. Everything else - including spaces, non-ASCII characters, and reserved delimiters when used as data - must be percent-encoded. Each byte is written as % followed by its two-digit hexadecimal value.

Character	Encoded Form	Why It Needs Encoding
Space	%20	Not allowed in URLs (+ is an older form-encoding alternative)
&	%26	Separates query parameters
=	%3D	Separates parameter keys from values
?	%3F	Starts the query string
#	%23	Starts the fragment identifier
/	%2F	Path separator
@	%40	User info separator
%	%25	The escape character itself

encodeURI vs encodeURIComponent

JavaScript provides two encoding functions with different rules about which characters to preserve. Choosing the wrong one is one of the most common URL-handling bugs.

Function	Preserves (does NOT encode)	Use For
encodeURI	: / ? # [ ] @ ! $ & ' ( ) * + , ; = - _ . ~	Encoding a complete URL while keeping its structure intact
encodeURIComponent	- _ . ~ ! ' ( ) *	Encoding a single query parameter value or path segment

Example: If a user searches for "cats & dogs", the query parameter value must be encoded with encodeURIComponent to produce cats%20%26%20dogs. Using encodeURI would leave the & unencoded, which the server would misinterpret as a parameter separator.

Input	encodeURI Result	encodeURIComponent Result
hello world	hello%20world	hello%20world
key=value&other=1	key=value&other=1	key%3Dvalue%26other%3D1
https://example.com/path	https://example.com/path	https%3A%2F%2Fexample.com%2Fpath
price is 50% off	price%20is%2050%25%20off	price%20is%2050%25%20off

Building URLs Correctly

The safe approach is to encode each part of the URL separately, then assemble them. Never encode the entire URL with encodeURIComponent - it will break the structure.

URL Part	Encoding Method	Example
Full URL	encodeURI	encodeURI("https://example.com/my path/")
Query parameter value	encodeURIComponent	"?q=" + encodeURIComponent("cats & dogs")
Path segment	encodeURIComponent	"/users/" + encodeURIComponent("john doe")
Full URL from template	URL constructor	new URL("/search", "https://example.com")

Modern JavaScript provides the URL and URLSearchParams APIs which handle encoding automatically. Using new URLSearchParams({q: "cats & dogs"}).toString() produces q=cats+%26+dogs without manual encoding.

Spaces: %20 vs +

There are two ways spaces appear in URLs, and the difference causes frequent confusion:

Encoding	Space Becomes	Standard	Where Used
Percent encoding	%20	RFC 3986	URL paths, most modern APIs
Form encoding	+	application/x-www-form-urlencoded	HTML form submissions, some query strings

Both are valid but used in different contexts. %20 is the general-purpose encoding. The + convention exists because early HTML forms encoded spaces as + for brevity. Most web servers accept both in query strings, but only %20 is correct in URL paths.

UTF-8 and International Characters

Non-ASCII characters are first encoded as UTF-8 bytes, then each byte is percent-encoded. A single emoji or CJK character can produce 6-12 characters of encoded output.

Character	UTF-8 Bytes	Percent Encoded
e with accent	C3 A9	%C3%A9
Pound sign	C2 A3	%C2%A3
Japanese character	E6 97 A5	%E6%97%A5
Emoji	F0 9F 98 80	%F0%9F%98%80

Internationalized Domain Names (IDNs) use a separate encoding called Punycode for the domain part, not percent encoding. Percent encoding applies to the path, query, and fragment portions of the URL.

Common Encoding Mistakes

Most URL encoding bugs come from five recurring patterns. Each has a specific fix that avoids the problem entirely.

Mistake	Problem	Fix
Double encoding	%20 becomes %2520	Only encode once - check if input is already encoded
Using encodeURI for parameters	& and = are not encoded, breaking query structure	Use encodeURIComponent for parameter values
Using encodeURIComponent for full URLs	:// and / get encoded, breaking the URL	Use encodeURI or build URL from parts
Not encoding + in parameter values	+ is decoded as space by servers	encodeURIComponent encodes + as %2B
Encoding already-encoded URLs	All % become %25	Decode first, then re-encode if needed

Reserved vs Unreserved Characters in RFC 3986

RFC 3986 (the current URI specification, published by the IETF in January 2005) splits URL characters into three sets: unreserved, reserved, and everything else. The rules for each set decide whether a character must be encoded, may be encoded, or must stay literal.

Set	Characters	Encoding Rule
Unreserved	A-Z a-z 0-9 - _ . ~	Never encode. Producers must leave these literal; consumers must treat %41 and A as equivalent.
Reserved (gen-delims)	: / ? # [ ] @	Must be encoded when used as data, left literal when used as structure.
Reserved (sub-delims)	! $ & ' ( ) * + , ; =	Context-dependent. encodeURIComponent encodes all of these; encodeURI leaves them alone.
Other (ASCII control, space, " < > \ ^ `)	Control bytes and unsafe ASCII	Must always be percent-encoded.

The tilde (~) was added to the unreserved set in RFC 3986 after being reserved in RFC 2396. Older servers that follow the 1998 rules may still encode ~ as %7E. Both forms are treated as equivalent by any spec-compliant decoder, so you can safely normalise either way.

What About the URL and URLSearchParams APIs?

Modern JavaScript exposes two objects that do URL encoding for you: URL and URLSearchParams. Both follow the WHATWG URL Standard, which is a living spec maintained jointly by browser vendors and differs from RFC 3986 on a handful of edge cases.

Worked example: Building a search URL with a query containing spaces, an ampersand and a plus sign.

Method	Code	Result
Manual	"?q=" + encodeURIComponent("cats & dogs + kittens")	?q=cats%20%26%20dogs%20%2B%20kittens
URLSearchParams	new URLSearchParams({q: "cats & dogs + kittens"}).toString()	q=cats+%26+dogs+%2B+kittens

URLSearchParams uses form encoding, so spaces become + rather than %20, and the literal plus becomes %2B to avoid ambiguity. Both outputs are accepted by any HTTP server that parses query strings correctly, but they are not byte-identical, so test both if you hash or sign URLs.

Security Implications

URL encoding is a correctness tool, not a security one. Attackers routinely use double-encoding and over-long UTF-8 sequences to smuggle payloads past naive filters. The OWASP Top Ten (2021 edition) lists improper input handling of encoded data under A03:2021 Injection, which remains in the 2025 candidate update.

• Double decoding. Never decode the same string twice. A filter that strips <script> will miss %253Cscript%253E if the server decodes the request once and the application decodes it again.
• Non-canonical encoding. Alphabetic hex digits are case-insensitive per RFC 3986, but some WAF signatures only match %20, not %2a or %2A. Normalise to one case before comparing.
• Path traversal. %2e%2e%2f decodes to ../ and is the classic directory traversal payload. Validate decoded paths against an allowlist, never a denylist.
• Open redirects. Encoding a full redirect target URL as a parameter lets attackers chain domains. Check the decoded host against your allowlist before redirecting.

For embedding user input inside an HTML attribute, URL encoding alone is not enough. You also need HTML entity encoding - the HTML Entity Encoder covers that case. For binary-to-text encoding used in authentication headers and data URIs, reach for the Base64 Encoder instead. JWTs use URL-safe Base64 and can be inspected with the JWT Decoder.

Browser and Server Quirks

Different systems disagree about edge cases even though they all claim RFC 3986 compliance. These differences bite anyone building APIs, scrapers, or SEO tooling.

Quirk	Behaviour	Workaround
Chrome strips trailing dots from hosts	example.com. becomes example.com before the request	Avoid trailing dots in canonical URLs
Apache decodes %2F in paths by default	/files/%2Fetc%2Fpasswd may reach the filesystem as /etc/passwd	Set AllowEncodedSlashes NoDecode in httpd.conf
Nginx preserves %2F by default	Opposite of Apache - %2F stays encoded	Use merge_slashes off if you need literal double slashes
curl -G appends data as query string	Spaces are encoded as %20 not +	Use --data-urlencode for form-style + encoding
Safari URL-encodes non-ASCII in the address bar	The visible URL may differ from the transmitted one	Rely on the network request, not the address bar display, when debugging

How Other Languages Handle URL Encoding

Every major language ships a URL encoder in its standard library, but the defaults differ enough to trip up developers crossing stacks. The table below shows the closest equivalent of encodeURIComponent in each ecosystem - the function you reach for when encoding a single query parameter value.

Language	Function	Space Encoding	Notes
Python 3	urllib.parse.quote(s, safe='')	%20	Use quote_plus for form-style + encoding. Default safe characters include /.
PHP	rawurlencode()	%20	urlencode() uses + (form encoding). rawurlencode matches RFC 3986 exactly.
Java	URLEncoder.encode(s, "UTF-8")	+	Always form encoding. For RFC 3986 URI encoding, use java.net.URI.
Go	url.QueryEscape()	+	url.PathEscape() leaves + literal and matches component encoding for path segments.
Ruby	URI.encode_www_form_component()	+	The older URI.escape was removed in Ruby 3.0.
C#	Uri.EscapeDataString()	%20	HttpUtility.UrlEncode uses + (form encoding).

If you are porting code between languages, pick the function that matches the encoding your server expects, not the one with the simplest name. Mixing %20 and + in the same URL is valid per RFC 3986 but confuses URL comparison, cache keys, and signed request verification.

All processing in this tool runs in your browser - your input never leaves your machine, and nothing you type is logged or sent to any server.

Sources

• IETF RFC 3986 - Uniform Resource Identifier (URI): Generic Syntax
• WHATWG URL Living Standard
• MDN - encodeURIComponent Reference
• MDN - encodeURI Reference
• OWASP Top Ten (2021)
• IETF RFC 1738 - Uniform Resource Locators (historical)
• W3C HTML 4.01 - application/x-www-form-urlencoded