Ever seen a web address with %20 or %3D scattered through it and wondered what those symbols mean? That is URL encoding — also called percent-encoding — at work. It is the mechanism that lets a URL safely carry spaces, punctuation, and characters from any language, even though URLs themselves are only allowed to contain a small set of plain ASCII characters. This guide explains what URL encoding is, why it exists, and the one JavaScript gotcha that trips up almost everyone.
What is URL encoding?
A URL is only permitted to contain a limited set of characters: letters, digits, and a handful of symbols. Anything outside that set — a space, an ampersand inside a value, an accented letter, an emoji — must be converted into a safe representation before it goes into the address. URL encoding does this by replacing each unsafe character with a percent sign followed by its byte value in hexadecimal. A space becomes %20, an equals sign becomes %3D, and so on.
This is why you can paste a search with spaces and special characters into a browser and still end up with a valid, shareable link.
Why is it needed?
URLs use certain characters as structural punctuation. The ? separates the path from the query string, & separates one query parameter from the next, = ties a key to its value, and / separates path segments. If one of your actual data values contains one of those characters, the URL becomes ambiguous: a search term containing an ampersand would look like the start of a new parameter.
Encoding removes the ambiguity. By turning the data's special characters into percent-escapes, you guarantee the structural characters in the URL only ever mean their structural role.
How percent-encoding works
Each character that needs encoding is first expressed as its bytes using UTF-8, and then each byte is written as a percent sign followed by two hexadecimal digits. A plain space is byte 0x20, so it becomes %20. The equals sign is 0x3D, giving %3D. Characters outside ASCII, like an accented e or an emoji, take more than one byte in UTF-8, so they become a sequence of percent-escapes such as %C3%A9.
Decoding simply reverses the process: every %XX is read back into its byte, and the bytes are reassembled into the original text.
Reserved vs. unreserved characters
The URL standard splits characters into groups. Unreserved characters — the letters A to Z and a to z, the digits 0 to 9, and a few marks like hyphen, underscore, period, and tilde — never need encoding. Reserved characters such as ? & = / # : have special meaning in a URL; they are left alone when they serve their structural purpose but must be encoded when they appear inside a value. Everything else, including spaces and non-ASCII text, always gets encoded.
encodeURI vs. encodeURIComponent (the classic gotcha)
JavaScript gives you two encoding functions and choosing the wrong one causes subtle bugs. encodeURI is meant for an entire URL, so it deliberately does NOT encode the structural characters like : / ? & =, because those are needed to keep the URL working. encodeURIComponent is meant for a single piece of data — one query value, for example — so it encodes those characters too.
The rule of thumb: use encodeURIComponent for each individual query parameter value, and use encodeURI only when you have a whole URL that is already structured correctly. Using encodeURI on a value that contains an ampersand will leave the ampersand intact and break your query string.
Watch out for double encoding
A common mistake is encoding a value that is already encoded. If you run encoding twice, a space that became %20 turns into %2520 (because the percent sign itself gets encoded to %25). The result looks plausible but is wrong, and the receiving server will decode it only once and end up with %20 as literal text. When debugging broken links, double encoding is one of the first things to check.
How to URL encode or decode
You can encode or decode any text instantly with the free URL encoder on ToolboxHub. Paste your text or a URL, and it converts special characters to percent-escapes — or decodes them back — right in your browser, with nothing sent to a server. It is handy for building query strings by hand, debugging an API request, or making sense of an encoded link someone sent you.
The short version
URL encoding replaces characters that are unsafe in a web address with a percent sign and the character's hex byte value, using UTF-8 for non-ASCII text. It exists so that data values cannot be confused with a URL's structural punctuation. In JavaScript, reach for encodeURIComponent on individual values and encodeURI only on whole URLs — and never encode something twice.