URL Encoder / Decoder

Percent-encode any text so it survives a trip through a URL, or decode a string that is already full of %20 and %3F sequences, entirely in your browser.

What is the URL Encoder / Decoder?

Percent-encoding is the mechanism that lets a URL carry characters it cannot hold literally: each unsafe byte is rewritten as a percent sign followed by two hexadecimal digits, so a space becomes %20 and a question mark becomes %3F. This page runs the browser's own encodeURIComponent function in the Encode direction and decodeURIComponent in the Decode direction, so the output matches exactly what your own JavaScript would produce. encodeURIComponent escapes the reserved characters that separate the parts of an address, including the colon, slash, question mark, hash, ampersand and equals sign, which is what makes it the right choice for a single query value rather than a whole address.

Key Features

• Encode and Decode tabs switch the direction with one click
• Output refreshes on every keystroke, driven by encodeURIComponent and decodeURIComponent
• Reference table pairs 20 common symbols with their percent codes
• Malformed input returns a clear invalid encoding message instead of failing silently
• Copy button places the finished result on your clipboard with a confirmation toast

Common Use Cases

• Escaping a search phrase or file name before dropping it into a query string
• Reading a redirect link where the destination address has been encoded inside another parameter
• Building an API request by hand and escaping values that contain ampersands or spaces
• Checking why a link breaks when a customer pastes it with accented characters

How to Use the URL Encoder / Decoder

1. Pick the Encode tab to escape plain text, or the Decode tab to read a percent-encoded string.
2. Clear the sample text that the tab loads and paste your own string into the input box.
3. Watch the lower box update as you type, since no submit step is involved.
4. Check the Common URL Encodings table below to confirm the percent code for a specific character.
5. Press Copy to put the result on your clipboard, or press Swap to flip the direction and start over.

Tips for Best Results

• Encode only the value, not the whole address, or the slashes and colon get escaped too
• decodeURIComponent leaves a plus sign alone, so replace + with %20 yourself if the string came from a form
• Switching tabs replaces the box with a fresh sample, so paste your text after choosing the direction
• Encoding twice turns every percent sign into %25, so decode once before you re-encode anything

Why Use WiserWork's URL Encoder / Decoder?

The result comes from the same encodeURIComponent and decodeURIComponent functions your own code calls, so there is no homegrown implementation to disagree with your runtime. Nothing is posted anywhere, which matters when the string you are decoding contains a token or a customer reference. The reference table sits directly under the converter, so you do not have to keep an RFC 3986 chart open in another tab.

Who Uses the URL Encoder / Decoder?

Backend and frontend developers reach for it while assembling query strings and debugging callback URLs. Support staff use it to read the mangled links customers paste into tickets. Analysts and email marketers open it when a tracking parameter carries a full address as its value.

Frequently Asked Questions

What is percent-encoding?

It is the mechanism that lets a URL carry characters outside its safe set. Each byte is written as a percent sign plus two hexadecimal digits, which is why a space appears as %20 and an ampersand as %26.

Does this tool use encodeURI or encodeURIComponent?

The Encode tab calls encodeURIComponent. That escapes the reserved delimiters as well, including the colon, slash, question mark, hash and ampersand, so it is meant for one value rather than a complete web address.

Why does my space become %20 instead of a plus sign?

encodeURIComponent always emits %20. The plus sign comes from the older form encoding used by application/x-www-form-urlencoded, and this tool neither produces nor interprets it.

Which characters are left untouched?

encodeURIComponent passes through letters, digits and the punctuation - _ . ! ~ * ' and parentheses. Everything else is percent-encoded.

What does the invalid URL encoding message mean?

Decoding failed because the string contains a percent sign that is not followed by two valid hexadecimal digits, such as a lone % or a sequence like %ZZ. Fix or remove that fragment and the result reappears.

Why does the table list %21 for the exclamation mark when the encoder leaves it alone?

The table is a lookup chart of the standard percent codes for 20 common symbols. encodeURIComponent deliberately keeps a handful of them, including the exclamation mark, apostrophe, parentheses and asterisk, because they are legal where they sit.

Can I encode a whole URL at once?

You can, but the scheme separator and every slash will be escaped, turning https://example.com into https%3A%2F%2Fexample.com. That form is correct only when the address is being carried as a parameter inside another URL.

Does the Swap button move my result into the input box?

No. Swap flips the active tab between Encode and Decode and loads that tab's sample text. Copy the result first if you want to feed it back in.

Is my text sent to a server?

No. Both directions run in the page through your browser's built-in functions, and the conversion involves no upload and no network request.

How does this differ from HTML entity encoding?

Percent-encoding protects characters inside a URL, while HTML entities such as & protect characters inside markup. They solve different problems and are not interchangeable.

Percent-encoding is easy to get subtly wrong by hand, and one missed character is enough to break a link. Keep this page open next to your editor when you are building or unpicking query strings.