URL Encoder / Decoder

Step-by-Step Guide

1. Paste a URL or text. Enter a complete URL or text to encode/decode in the input area.
2. Choose an action. Select one of four modes from the toolbar:
• URL Encode — Preserves URL structure (:, /, ?, =, &).
• URL Decode — Reverses percent-encoding.
• Component Encode — Encodes structural characters too; use for query parameter values.
• Component Decode — Decodes component-encoded strings.
3. Review the output. The result appears with character, line, and size statistics.
4. Copy or download. Use Copy to copy to clipboard or Download to save as a .txt file.

URL encoding preserves the structure of a complete URL, while component encoding is intended for individual URL values such as query parameters. All processing happens locally in your browser.

Key Differences

Reserved vs. Unreserved Characters

RFC 3986 defines which characters have special meaning in URLs and must be percent-encoded when used outside their reserved purpose.

// Unreserved characters (never encoded):
// A-Z a-z 0-9 - _ . ~

// Reserved characters (have special meaning):
// : / ? # [ ] @
// ! $ & ' ( ) * + , ; =

// Sub-delimiters (also reserved):
// ! $ & ' ( ) * + , ; =

// Percent-encoding: % + two hex digits
// Space → %20
// " → %22
// < → %3C
// > → %3E
// { → %7B
// } → %7D
// | → %7C
//  → %5C
// ^ → %5E
// ` → %60

encodeURI vs encodeURIComponent

The critical difference is which reserved characters are encoded. This determines whether you're encoding a full URL or a single component.

const url = "https://example.com/search?q=hello world&lang=en";

// encodeURI - preserves URL structure
encodeURI(url);
// "https://example.com/search?q=hello%20world&lang=en"
// ^ spaces encoded, but :, /, ?, =, & preserved

// encodeURIComponent - encodes everything
encodeURIComponent("hello world&lang=en");
// "hello%20world%26lang%3Den"
// ^ space, &, = all encoded

// Practical example:
const base = "https://api.example.com/items";
const query = "shoes & socks";  // user input
const fullUrl = base + "?q=" + encodeURIComponent(query);
// "https://api.example.com/items?q=shoes%20%26%20socks"

Unicode & UTF-8 Handling

Both functions encode Unicode characters as UTF-8 byte sequences, then percent-encode each byte.

// Unicode characters become multi-byte UTF-8 sequences
encodeURIComponent("🚀");   // "%F0%9F%9A%80" (4 bytes)
encodeURIComponent("café"); // "caf%C3%A9" (é = 0xC3 0xA9)
encodeURIComponent("Москва"); // "%D0%9C%D0%BE%D1%81%D0%BA%D0%B2%D0%B0"

// Decode reverses the process
decodeURIComponent("%F0%9F%9A%80"); // "🚀"
decodeURIComponent("caf%C3%A9");    // "café"

// Always use encodeURIComponent for user-supplied values
// that go into query strings or path segments

JavaScript

Built-in browser APIs for URL encoding and decoding.

// Encode a full URL (preserves structure)
const url = "https://example.com/path?name=John Doe";
encodeURI(url);
// "https://example.com/path?name=John%20Doe"

// Encode a single query value
const query = "John Doe & Jane";
encodeURIComponent(query);
// "John%20Doe%20%26%20Jane"

// Decode
decodeURI("https://example.com/path?name=John%20Doe");
// "https://example.com/path?name=John Doe"

decodeURIComponent("John%20Doe%20%26%20Jane");
// "John Doe & Jane"

// Build a URL safely with URLSearchParams
const params = new URLSearchParams();
params.set("q", "shoes & socks");
params.set("lang", "en");
const url = "https://example.com/search?" + params.toString();
// "https://example.com/search?q=shoes%20%26%20socks&lang=en"

Python

Use urllib.parse for URL encoding in Python.

from urllib.parse import quote, unquote, urlencode

# Quote a single component (like encodeURIComponent)
quote("hello world & stuff")
# 'hello%20world%20%26%20stuff'

# Unquote (like decodeURIComponent)
unquote("hello%20world%20%26%20stuff")
# 'hello world & stuff'

# Quote a full URL path (like encodeURI)
quote("/path/to/resource", safe="/:")
# '/path/to/resource'  (preserves / and :)

# Build query string safely
params = {"q": "shoes & socks", "lang": "en"}
urlencode(params)
# 'q=shoes+%26+socks&lang=en'

# For spaces as %20 instead of +, use doseq=True or quote_plus alternative
from urllib.parse import quote_plus
quote_plus("hello world")  # 'hello+world' (form encoding)
quote("hello world")       # 'hello%20world' (URL encoding)

cURL

Pass pre-encoded URLs or use --data-urlencode for automatic encoding.

# Pass pre-encoded URL
curl "https://api.example.com/search?q=shoes%20%26%20socks"

# Let curl encode query parameters (form-style)
curl --data-urlencode "q=shoes & socks"      --data-urlencode "lang=en"      "https://api.example.com/search"
# POSTs: q=shoes+%26+socks&lang=en

# GET request with encoded params
curl -G --data-urlencode "q=shoes & socks"        --data-urlencode "lang=en"        "https://api.example.com/search"
# GETs: https://api.example.com/search?q=shoes+%26+socks&lang=en

# For strict %20 (not +), use jq or printf to pre-encode
curl "https://api.example.com/search?q=$(printf '%s' 'shoes & socks' | jq -sRr @uri)"
# "https://api.example.com/search?q=shoes%20%26%20socks"