Last updated
URL Encoder — Examples
The URL Encoder converts text and special characters into URL-safe percent-encoded format. Here are practical examples for all common URL encoding scenarios.
Basic Encoding
// JavaScript — URL encode a string
const text = "Hello World! This has spaces & special chars: <test>";
// encodeURIComponent — encodes everything except letters, digits, - _ . ! ~ * ' ( )
const encoded = encodeURIComponent(text);
console.log(encoded);
// "Hello%20World!%20This%20has%20spaces%20%26%20special%20chars%3A%20%3Ctest%3E"
// encodeURI — encodes everything except URI structural characters
const uri = "https://example.com/search?q=hello world&lang=en";
const encodedUri = encodeURI(uri);
console.log(encodedUri);
// "https://example.com/search?q=hello%20world&lang=en"
# Python — URL encode a string
from urllib.parse import quote, quote_plus, urlencode
text = "Hello World! This has spaces & special chars: <test>"
# quote — encodes everything except letters, digits, and _ . - ~
encoded = quote(text)
print(encoded)
# "Hello%20World%21%20This%20has%20spaces%20%26%20special%20chars%3A%20%3Ctest%3E"
# quote_plus — like quote but encodes spaces as +
encoded_plus = quote_plus(text)
print(encoded_plus)
# "Hello+World%21+This+has+spaces+%26+special+chars%3A+%3Ctest%3E"
Encoding Query Parameters
// JavaScript — build a URL with encoded query parameters
function buildUrl(base, params) {
const query = Object.entries(params)
.map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
.join("&");
return `${base}?${query}`;
}
const url = buildUrl("https://api.example.com/search", {
q: "hello world & more",
lang: "en",
filter: "date:2024-01-01..2024-12-31",
callback: "https://mysite.com/callback?id=123"
});
console.log(url);
// https://api.example.com/search?q=hello%20world%20%26%20more&lang=en&...
# Python — build a URL with encoded query parameters
from urllib.parse import urlencode, urlunparse
params = {
"q": "hello world & more",
"lang": "en",
"filter": "date:2024-01-01..2024-12-31",
"callback": "https://mysite.com/callback?id=123"
}
query_string = urlencode(params)
url = f"https://api.example.com/search?{query_string}"
print(url)
Decoding URL-Encoded Strings
// JavaScript — decode a URL-encoded string
const encoded = "Hello%20World%21%20This%20has%20spaces%20%26%20special%20chars";
const decoded = decodeURIComponent(encoded);
console.log(decoded);
// "Hello World! This has spaces & special chars"
// Decode a full URL
const encodedUrl = "https://example.com/search?q=hello%20world&lang=en";
const decodedUrl = decodeURI(encodedUrl);
console.log(decodedUrl);
// "https://example.com/search?q=hello world&lang=en"
# Python — decode a URL-encoded string
from urllib.parse import unquote, unquote_plus, parse_qs
encoded = "Hello%20World%21%20This%20has%20spaces%20%26%20special%20chars"
decoded = unquote(encoded)
print(decoded)
# "Hello World! This has spaces & special chars"
# Parse a query string
query = "q=hello+world&lang=en&tags=python%2Cweb"
params = parse_qs(query)
print(params)
# {'q': ['hello world'], 'lang': ['en'], 'tags': ['python,web']}
Common Characters and Their Encodings
- Space:
%20(or+in form data) - Ampersand
&:%26 - Equals
=:%3D - Plus
+:%2B - Slash
/:%2F - Question mark
?:%3F - Hash
#:%23 - At sign
@:%40 - Colon
::%3A
Encoding International Characters
// JavaScript — encode international characters
const international = "日本語テスト";
const encoded = encodeURIComponent(international);
console.log(encoded);
// "%E6%97%A5%E6%9C%AC%E8%AA%9E%E3%83%86%E3%82%B9%E3%83%88"
// Decode back
console.log(decodeURIComponent(encoded));
// "日本語テスト"
// Arabic
const arabic = "مرحبا";
console.log(encodeURIComponent(arabic));
// "%D9%85%D8%B1%D8%AD%D8%A8%D8%A7"
Form Data Encoding
// JavaScript — encode form data (application/x-www-form-urlencoded)
function encodeFormData(data) {
return Object.entries(data)
.map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
.join("&");
}
const formData = {
username: "john doe",
email: "john@example.com",
message: "Hello! How are you? I'm fine & well."
};
const encoded = encodeFormData(formData);
console.log(encoded);
// "username=john%20doe&email=john%40example.com&message=Hello!%20How%20are%20you%3F..."
Avoiding Double-Encoding
// JavaScript — check if a string is already encoded before encoding
function safeEncode(str) {
try {
// If decoding changes the string, it was encoded
const decoded = decodeURIComponent(str);
if (decoded !== str) {
// Already encoded — return as-is
return str;
}
} catch (e) {
// Not valid encoded string — encode it
}
return encodeURIComponent(str);
}
console.log(safeEncode("hello world")); // "hello%20world"
console.log(safeEncode("hello%20world")); // "hello%20world" (not double-encoded)
OAuth and API Authentication
# Python — URL encode OAuth parameters
from urllib.parse import quote
def oauth_encode(value):
"""
OAuth 1.0 requires percent-encoding with uppercase hex digits
and encoding of all characters except unreserved characters.
"""
return quote(str(value), safe="")
# OAuth signature base string requires encoded parameters
params = {
"oauth_consumer_key": "xvz1evFS4wEEPTGEFPHBog",
"oauth_nonce": "kYjzVBB8Y0ZFabxSWbWovY3uYSQ2pTgmZeNu2VS4cg",
"oauth_timestamp": "1318622958",
"status": "Hello Ladies + Gentlemen, a signed OAuth request!"
}
encoded_params = "&".join(
f"{oauth_encode(k)}={oauth_encode(v)}"
for k, v in sorted(params.items())
)
print(encoded_params)
URL encoding is essential for any web application that passes data in URLs. Always encode user input before including it in URLs to prevent broken requests, security vulnerabilities, and data corruption.