How to Encode and Decode URLs — A Complete Developer Guide
URL encoding — also called percent encoding — converts characters that are not safe in URLs into a transmissible format. If you have seen %20 where a space should be, or %40 instead of an @ sign, you have already encountered URL encoding. Understanding when and how to apply it prevents subtle bugs that appear only when users submit unexpected characters.
Use our URL Encoder and URL Decoder to encode or decode any string instantly. To break a URL into its individual components — protocol, host, path, query, fragment — use our URL Parser tool. And to extract all URLs from a block of text in one step, try our URL Extractor.
Why URLs Need Encoding
The URL specification (RFC 3986) restricts URLs to a specific subset of ASCII characters. Characters outside this set — spaces, accented letters, Chinese characters, emoji, and many punctuation marks — must be percent-encoded. Some characters also have reserved structural roles within a URL: the question mark starts the query string, the ampersand separates parameters, the equals sign separates keys from values, and the hash marks the fragment identifier.
When these reserved characters appear inside data values (not as URL structure), they must be encoded. Without encoding, a search for "bread and butter" with an ampersand would produce a broken URL: /search?q=bread and butter. The browser would parse this as two separate parameters — q=bread and then butter= — rather than one search query.
The correctly encoded form: /search?q=bread%20%26%20butter — the space becomes %20 and the ampersand becomes %26, preserving the intended query string structure.
How Percent Encoding Works
Each character to be encoded is replaced by a percent sign followed by two uppercase hexadecimal digits representing the character byte value in UTF-8. To understand hexadecimal values, use our Hex Converter or ASCII Converter tool.
Common encodings you will encounter constantly: Space → %20 (ASCII byte 32, hex 20) @ sign → %40 (byte 64, hex 40) Forward slash / → %2F (byte 47, hex 2F) Question mark ? → %3F (byte 63, hex 3F) Ampersand and → %26 (byte 38, hex 26) Equals sign = → %3D (byte 61, hex 3D) Hash sign # → %23 (byte 35, hex 23) Plus sign + → %2B (byte 43, hex 2B)
For characters outside ASCII — accented letters, Chinese characters, emoji — the character is first converted to its UTF-8 byte sequence, then each byte is percent-encoded separately. The euro sign currency symbol has UTF-8 bytes E2, 82, AC, giving %E2%82%AC. The emoji with code point U+1F600 has four UTF-8 bytes and encodes as %F0%9F%98%80.
Characters that never need encoding anywhere in a URL: A-Z, a-z, 0-9, hyphen, underscore, period, tilde. These are the unreserved characters defined in RFC 3986.
JavaScript — The Right Functions to Use
JavaScript provides two pairs of encoding functions and choosing the wrong one is a very common source of hard-to-debug URL bugs.
encodeURIComponent and decodeURIComponent
Use for encoding individual parameter values or path segments. It encodes all characters except letters, digits, hyphen, underscore, period, exclamation mark, tilde, asterisk, apostrophe, and parentheses.
Example: const query = encodeURIComponent("bread and butter with symbols"); This is safe to append as a query parameter value. Never pass an entire URL to encodeURIComponent — it will encode the colons and slashes, completely breaking the URL structure.
encodeURI and decodeURI
Use for encoding a complete URL. It leaves the structural characters intact: colon, slash, question mark, hash, brackets, at sign, exclamation, dollar, ampersand, apostrophe, parentheses, asterisk, plus, comma, semicolon, equals. This makes it safe for encoding a full URL while preserving its structure, but it will NOT encode ampersands inside query values.
The URL API — The Cleanest Approach
The modern URL API handles encoding automatically and is the preferred approach for building URLs in JavaScript: const url = new URL("https://toolchecking.com/url-parser/"); url.searchParams.set("q", "bread and butter"); The URL API applies correct encoding automatically for each parameter value, eliminating the most common encoding mistakes.
Encode or decode any URL or string — free and instant, no signup required
URL Encoder → URL Decoder →URL Encoding in Python and PHP
Python
Python urllib.parse provides complete URL encoding tools: from urllib.parse import quote, quote_plus, urlencode, unquotequote("hello world") gives "hello%20world" — uses %20 for spaces, correct for path segments quote_plus("hello world") gives "hello+world" — uses + for spaces, correct for form data urlencode(params_dict) builds a complete query string from a dictionary unquote("hello%20world") decodes back to "hello world"
PHP
urlencode() uses + for spaces — appropriate for HTML form data rawurlencode() uses %20 for spaces — RFC-compliant, appropriate for path segments http_build_query() builds a complete query string from an array, handling all encoding automatically
For checking whether a URL returns the correct redirect status, our URL Redirect Checker tool traces the full redirect chain and shows every HTTP status code.
The %20 vs Plus Sign Confusion
Spaces can appear in URLs as %20 or as a plus sign, and the rules for which is correct depend on where in the URL the space appears.
%20 is the RFC-compliant percent-encoded form of a space and is valid in any part of a URL — path, query string, fragment, anywhere. This is what encodeURIComponent() produces.
The plus sign represents a space only in the query string, only in application/x-www-form-urlencoded format. This is the format HTML forms use when submitted. Server-side frameworks know to interpret + as space in query parameters. However, in the path portion of a URL, a + is a literal plus sign, not a space.
The safe rule: always use %20. It is correct everywhere. Use + only when you know you are dealing with HTML form submission format and your server framework handles the decoding.