URL Encoder & Decoder with Built-in URL Parser

What is URL Encoding (Percent Encoding)?

// Encode a query parameter value
const param = encodeURIComponent('hello world & goodbye');
console.log(param); // → 'hello%20world%20%26%20goodbye'

// Encode a full URL (preserves structure)
const url = encodeURI('https://example.com/path name?q=hello world');
console.log(url); // → 'https://example.com/path%20name?q=hello%20world'

// Decode a percent-encoded string
const decoded = decodeURIComponent('hello%20world%20%26%20goodbye');
console.log(decoded); // → 'hello world & goodbye'

// Build a URL with encoded parameters
const base = 'https://api.example.com/search';
const query = `?q=${encodeURIComponent('你好')}&lang=zh`;
console.log(base + query); // → 'https://api.example.com/search?q=%E4%BD%A0%E5%A5%BD&lang=zh'

Key Features

Examples

https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dhello%20world%26lang%3Den

https://example.com/search?q=hello world&lang=en

https://example.com/search?q=你好世界

https://example.com/search?q=%E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C

https://example.com/api?name=John Doe&role=admin&lang=en&sort=date desc

https://example.com/api?name=John%20Doe&role=admin&lang=en&sort=date%20desc

https://user:pass@example.com:8080/path/to/page?key=value&arr[]=1#section-2

https://user:pass@example.com:8080/path/to/page?key=value&arr%5B%5D=1#section-2

https://auth.example.com/authorize?redirect_uri=https://myapp.com/callback?code=abc&state=xyz

https://auth.example.com/authorize?redirect_uri=https%3A%2F%2Fmyapp.com%2Fcallback%3Fcode%3Dabc%26state%3Dxyz

How to Use

1. 1

   Enter a URL or Encoded String

   Paste a URL in the decoded area to encode it, or paste a percent-encoded string in the encoded area to decode it. Select encodeURI or encodeURIComponent mode depending on your use case.

2. 2

   See Results and Parsed Structure

   The other area updates instantly as you type. The URL parser breaks down the URL into protocol, host, port, path, query parameters, and fragment — all editable.

3. 3

   Copy or Rebuild

   Click Copy to copy the encoded or decoded result. Edit individual URL components and click Rebuild to construct a new URL from the modified parts.

Common Errors

https://example.com/path%2520with%2520spaces

https://example.com/path%20with%20spaces

https://example.com/my+file+name.pdf

https://example.com/my%20file%20name.pdf

encodeURI('key=value&more')  → 'key=value&more' (& not encoded!)

encodeURIComponent('key=value&more')  → 'key%3Dvalue%26more'

Decoding %82%B1%82%F1 as UTF-8 (this is Shift-JIS for こん)

Using UTF-8: %E3%81%93%E3%82%93 correctly decodes to こん

encodeURIComponent('../images/photo.jpg')  → '..%2Fimages%2Fphoto.jpg'

Encode each segment: '../images/' + encodeURIComponent('my photo.jpg')

Common Use Cases

Debugging Garbled URLs

Decode percent-encoded URLs from server logs, error messages, or browser dev tools to read the original human-readable text.

API Development

Encode query parameter values for REST API calls, ensuring special characters like &, =, and spaces don't break the request URL.

OAuth Flow Setup

Properly encode redirect_uri and other URL parameters in OAuth authorization URLs to prevent authentication failures.

Internationalized URLs

Encode and decode URLs containing Chinese, Japanese, Korean, Arabic, or other non-ASCII characters for internationalized web applications.

Marketing Link Analysis

Decode tracking URLs from email campaigns and advertising platforms to understand the embedded UTM parameters and redirect chains.

URL Structure Inspection

Parse complex URLs into their component parts — protocol, host, port, path, query parameters, and fragment — for analysis and modification.

Technical Details

RFC 3986 Reserved & Unreserved Characters

RFC 3986 defines unreserved characters (A-Z, a-z, 0-9, -, ., _, ~) that never need encoding, and reserved characters (:, /, ?, #, [, ], @, !, $, &, ', (, ), *, +, ,, ;, =) that serve as URI delimiters and must be percent-encoded when used as data.

UTF-8 Byte Encoding Flow

Non-ASCII characters are first converted to their Unicode code point, then encoded as UTF-8 bytes (1-4 bytes depending on the code point range), and finally each byte is percent-encoded as %XX. For example: é (U+00E9) → UTF-8 bytes C3 A9 → %C3%A9. The emoji 🎉 (U+1F389) → UTF-8 bytes F0 9F 8E 89 → %F0%9F%8E%89.

URL vs URI Terminology

A URI (Uniform Resource Identifier) is the general term for any identifier string. A URL (Uniform Resource Locator) is a URI that also specifies the access mechanism (like https://). The encoding rules in RFC 3986 apply to all URIs. JavaScript's API uses the URI terminology (encodeURI, decodeURI), while everyday usage favors URL.

Best Practices

Use the Right Mode for the Job

Use encodeURIComponent() for individual query parameter keys and values. Use encodeURI() only when you have a complete URL and want to encode unsafe characters without breaking its structure. Never use encodeURI() on parameter values that may contain &, =, or other reserved characters.

Avoid Double Encoding

Before encoding a string, check whether it is already encoded. Look for existing % sequences. Encoding an already-encoded string turns %20 into %2520, %3D into %253D, and so on. If you're unsure, decode first, then encode once.

Decode on the Server Side

Most web frameworks automatically decode URL parameters before your application code sees them. Avoid manually decoding parameters that your framework has already decoded — this can cause issues if the original value contained literal percent sequences.

Encode Values for OAuth and API Signing

OAuth 1.0 signature base strings and many API signing algorithms require strict RFC 3986 percent encoding. Use encodeURIComponent() and then replace any remaining characters that it doesn't encode (like !, ', (, ), *) with their percent-encoded equivalents if the spec requires it.

Frequently Asked Questions