🔗 URL Encoder / Decoder

Percent encoding replaces a character with a percent sign followed by its hexadecimal byte value. A space becomes twenty in hex, an ampersand becomes twenty-six, a question mark becomes three F and a forward slash becomes two F. The scheme exists because URLs use a small set of characters structurally, and any of those characters appearing inside a value would otherwise be read as structure.

The two encoding modes differ in how much they escape. encodeURIComponent escapes everything reserved, including colon, slash, question mark, hash, square brackets, at sign, dollar, ampersand, apostrophe, parentheses, asterisk, plus, comma, semicolon and equals. That is what you want for a single value being dropped into a query string, because the value must not be able to introduce a new parameter or terminate the query.

encodeURI leaves the structural characters alone, so a complete address keeps its scheme separator, its path slashes and its query delimiters. Use it when you have a whole URL containing, say, spaces or accented characters and you want it made valid without dismantling it. Decoding always uses the component form, and an invalid escape sequence raises a clear error instead of returning half-decoded text.

Suppose the text you want to encode is the phrase cats & dogs, destined for a search parameter. With encodeURIComponent, the two spaces become percent-twenty and the ampersand becomes percent-twenty-six, giving cats%20%26%20dogs. That is correct: had the ampersand been left as it is, the receiving server would have read dogs as the start of a second parameter rather than part of the search term.

Switch on the plus-sign option and the same phrase becomes cats+%26+dogs, which is the form HTML forms traditionally submit. The ampersand is still escaped, because a plus sign only ever substitutes for a space.

Now take the complete address of a search page with that phrase already in the query string. Run it through encodeURI instead and the scheme colon, the double slash, the path slashes, the question mark, the equals sign and the ampersand all survive untouched, while the spaces inside the value become percent-twenty. The URL remains structurally valid and still points at the same endpoint.

The parts panel then splits that address into its protocol, hostname, path, query and fragment, and lists the query parameter key with its decoded value.

The rule of thumb is simple: encode values, not URLs. If you are assembling a link and need to insert a user-supplied search term, an email address or a file name, encode that fragment with encodeURIComponent and then concatenate it into the URL. If you already have a finished URL and simply need it made transport-safe, use encodeURI on the whole thing. Using encodeURIComponent on a complete URL escapes the slashes and colons and produces a string that is no longer a link at all.

Double encoding is the other common failure. A string that already contains percent-twenty will, if encoded again, have its percent sign escaped to percent-two-five, producing percent-two-five-twenty. Symptoms include literal percent codes appearing in page text or a parameter arriving at the server with visible escape sequences in it. Decode once and inspect before encoding.

The plus-sign option needs care too. Plus means space only in the query string of form submissions; in a path segment a plus is a literal plus. Applying it to path data will corrupt the value. When decoding fails, the error usually means a lone percent sign or an incomplete two-digit hex pair.