URL Encoding & Decoding
Encode and decode URL strings to safely handle special characters and non-ASCII text, ideal for query parameters and path transmission.
How to Use
URL encoding converts special or non-ASCII characters into %XX format for safe transmission in URLs.
Use 'Encode' to transform text into a URL-safe format (e.g., for query parameters).
Use 'Decode' to restore %XX sequences back to their original characters.
Common scenarios: handling query parameters, form data transmission, API calls, etc.
Features
- Two encoding modes: encodeURIComponent and encodeURI
- Flexible space handling: encode as + or %20
- Real-time conversion with input/output length statistics
- Copy/clear buttons and bidirectional send-to-panel functionality
- Full internationalization support with DaisyUI multi-theme
What is URL Encoding?
URL encoding converts characters into %XX percent-encoded sequences to ensure safe transmission in URLs.
encodeURIComponent is suitable for individual components (e.g., a single query parameter value) and encodes most non-alphanumeric characters.
encodeURI is designed for full URI strings and preserves reserved characters with structural meaning, such as ?, &, =, and /.
Common Use Cases
- Building query parameters (e.g., search keywords, filter conditions)
- Encoding and transmitting form data via GET/POST
- Encoding API request parameters
- Safely inserting user input into URL path segments
FAQs & Pitfalls
- encodeURI vs encodeURIComponent: Use component encoding for individual parts, and URI encoding for entire URLs
- Spaces and +: In application/x-www-form-urlencoded, spaces are commonly represented as + in query strings
- Avoid double decoding: Repeated decoding can corrupt data
- Invalid percent sequences throw errors; handle exceptions gracefully
How to Perform URL Encoding/Decoding in Programming Languages
JavaScript
Encode
// Component (recommended for query values)
const encoded = encodeURIComponent(text);
// If you need '+' for spaces in query strings
const encodedPlus = encoded.replace(/%20/g, '+');
// Full URI
const encodedUri = encodeURI(url);Decode
// Treat '+' as space if needed
const input = plusAsSpace ? s.replace(/\+/g, ' ') : s;
// Component
const dec1 = decodeURIComponent(input);
// Fallback to decodeURI when input is a full URL
const dec2 = decodeURI(input);PHP
Encode
// Component (RFC 3986)
$encoded = rawurlencode($text);
// '+' for spaces (application/x-www-form-urlencoded)
$encodedPlus = str_replace('%20', '+', $encoded);
// Full query usage
$query = http_build_query(['q' => '你好 世界', 'type' => 'text']);Decode
// Component
$decoded = rawurldecode($s);
// If input uses '+' for spaces
$decodedPlus = urldecode($s);Python
Encode
from urllib.parse import quote, quote_plus
# Component (RFC 3986)
enc = quote(text, safe='')
# '+' for spaces (application/x-www-form-urlencoded)
enc_plus = quote_plus(text)Decode
from urllib.parse import unquote, unquote_plus
# Component
dec = unquote(s)
# Input with '+' for spaces
dec_plus = unquote_plus(s)Go
Encode
import (
"net/url"
)
// Query component
enc := url.QueryEscape(text) // spaces => +
// Path segment
// go1.8+
// url.PathEscape(text)Decode
import (
"net/url"
)
// Query component
dec, _ := url.QueryUnescape(s)
// Path segment
// url.PathUnescape(s)Rust
Encode
// Cargo.toml: urlencoding = "^2"
use urlencoding::{encode, encode_binary};
let enc = encode(text); // component; spaces => %20
let enc_plus = enc.replace("%20", "+"); // if you need '+' for spacesDecode
use urlencoding::decode;
// decode treats '+' as space
let dec = decode(s)?; // Result, _> Java
Encode
import java.net.URLEncoder;
import java.nio.charset.StandardCharsets;
// Query param / form style (spaces => '+')
String enc = URLEncoder.encode(text, StandardCharsets.UTF_8);
// For RFC3986-like component encoding, replace '+' with %20 if needed
String encSpace = enc.replace("+", "%20");Decode
import java.net.URLDecoder;
import java.nio.charset.StandardCharsets;
// URLDecoder treats '+' as space
String dec = URLDecoder.decode(s, StandardCharsets.UTF_8);