CoderTools

URL Encoder/Decoder | CoderTools

Description

About URL Encoding

URL encoding, also known as percent encoding, is a mechanism to encode information in a Uniform Resource Identifier (URI) under certain circumstances. It consists of substituting certain characters with one or more character triplets that consist of the percent character '%' followed by two hexadecimal digits.

URL encoding is necessary when a URL contains characters that are not allowed in URLs, or when characters have special meaning in URL syntax. This ensures that URLs can be safely transmitted over the internet regardless of the characters they contain.

Note: Different parts of a URL (scheme, authority, path, query, fragment) have different encoding rules. This tool uses standard URL encoding suitable for query parameters and form data.

Common Characters and Their Encodings

Character URL Encoded Description
Space %20 Space character
! %21 Exclamation mark
" %22 Quotation mark
# %23 Hash/Fragment identifier
% %25 Percent character
& %26 Ampersand/Query separator
+ %2B Plus sign
= %3D Equals sign/Query value separator
? %3F Question mark/Query indicator

Common Use Cases

Examples

Example 1: Query Parameter

Original: Hello World!

Encoded: Hello%20World%21

Example 2: Email Address

Original: [email protected]

Encoded: user%40example.com

Example 3: Complex Query

Original: search=JavaScript & Node.js

Encoded: search%3DJavaScript%20%26%20Node.js

References and Further Reading

Best Practices

Use encodeURIComponent() for Query Parameters

In JavaScript, use encodeURIComponent() for individual query parameter values. It encodes all special characters including &, =, and ?. Don't use encodeURI() for this.

Don't Double-Encode

Encoding already-encoded URLs creates broken links (e.g., %25 instead of %). Check if data is already encoded before applying encoding again.

Encode Only When Necessary

Alphanumeric characters (A-Z, a-z, 0-9) and -_.~ don't need encoding. Encoding everything wastes bandwidth and reduces URL readability.

Use Standard Library Functions

Don't implement URL encoding manually. Use built-in functions: encodeURIComponent() (JS), urllib.parse.quote() (Python), urlencode() (PHP).

Handle Plus Signs Carefully

Space can be encoded as + (form encoding) or %20 (URL encoding). Know which your system expects. Most APIs prefer %20 for spaces.

Encode at the Source

Encode data when constructing URLs, not after. Building a URL string and then encoding the whole thing breaks the URL structure.

Troubleshooting

Why does my decoded URL still have %XX sequences?

The URL may be double-encoded. Try decoding again. This happens when already-encoded URLs are encoded a second time.

Why is my + sign becoming a space?

In form data (application/x-www-form-urlencoded), + represents space. In URLs, + should be encoded as %2B if you want a literal plus sign.

Why does my server receive garbled characters?

Encoding mismatch. Ensure both client and server expect UTF-8 encoded values. Non-ASCII characters must be UTF-8 encoded before percent-encoding.

Why is encodeURI() not encoding my query parameters?

encodeURI() is for whole URIs and preserves special characters like &, =, ?. Use encodeURIComponent() for individual parameter values.