UtilStation

URL Encoder/Decoder

v1.0.0

URL Encoder/Decoder

Encode and decode URLs with support for both standard URI encoding and component encoding methods.

Warning

This tool is not supported on mobile devices, please use a desktop device for better experience.

Standard URI Encoding

Encodes special characters but preserves valid URI characters like :, /, ?, #, etc. Use for complete URLs.
Characters: 0
Characters: 0
Mode
Encoding
Standard URI
Input Length
0
Characters
Output Length
0
Characters
Size Change
0%
Decrease

URL Encoding Reference

CharacterEncodedDescriptionActions
%20Space
!%21Exclamation mark
"%22Quotation mark
#%23Hash/Fragment
$%24Dollar sign
%%25Percent sign
&%26Ampersand
'%27Apostrophe
(%28Left parenthesis
)%29Right parenthesis
*%2AAsterisk
+%2BPlus sign
,%2CComma
/%2FForward slash
:%3AColon
;%3BSemicolon
<%3CLess than
=%3DEquals sign
>%3EGreater than
?%3FQuestion mark
@%40At symbol
[%5BLeft bracket
\%5CBackslash
]%5DRight bracket
^%5ECaret
`%60Grave accent
{%7BLeft brace
|%7CPipe
}%7DRight brace
~%7ETilde

Usage Examples

Standard URI Encoding

Before:
https://utilstation.com/search?q=hello world
After:
https://utilstation.com/search?q=hello%20world

URI Component Encoding

Before:
search query & filters
After:
search%20query%20%26%20filters

  • Encode and decode base64 strings or files, commonly used for encoding binary data in text format.

  • HTTP Status Codes
    Similar tool

    Complete reference for HTTP response status codes with descriptions, use cases, and categories.

  • HTML Entities
    Similar tool

    Complete HTML character entity reference with symbols, special characters, and escape codes.

  • MIME Types
    Similar tool

    Complete reference for MIME types and file extensions used in web development and file handling.

Understanding URL Encoding

URL encoding (also called percent encoding) is a mechanism for encoding special characters in URLs so they can be safely transmitted over the internet. It replaces unsafe ASCII characters with a "%" followed by two hexadecimal digits.

Why URL Encoding is Necessary

Reserved Characters

URLs have special characters that serve specific purposes. When these characters need to be used as data rather than syntax, they must be encoded:

  • ? (question mark) - Separates URL from query parameters
  • & (ampersand) - Separates multiple query parameters
  • = (equals) - Separates parameter names from values
  • # (hash) - Indicates URL fragments
  • / (slash) - Separates URL path segments

Unsafe Characters

Some characters are unsafe for URLs because they might be interpreted differently by different systems:

  • Space - Not allowed in URLs, encoded as %20
  • Non-ASCII characters - Must be encoded for compatibility
  • Control characters - Can cause parsing issues

Encoding Methods

encodeURI() vs encodeURIComponent()

encodeURI() - Standard URI Encoding
  • • Encodes special characters but preserves URI structure
  • • Does NOT encode: : / ? # [ ] @
  • • Use for: Complete URLs with protocols and paths
  • • Example: https://utilstation.com/search?q=hello%20world
encodeURIComponent() - Component Encoding
  • • Encodes ALL special characters including URI delimiters
  • • Encodes: : / ? # [ ] @ ! $ & ' ( ) * + , ; =
  • • Use for: Query parameter values and URL fragments
  • • Example: search%20query%20%26%20filters

Common Use Cases

Query Parameters

When passing data in URL query strings, always use URI component encoding for the parameter values:

❌ Wrong: ?search=hello world&filter=type:image
✅ Correct: ?search=hello%20world&filter=type%3Aimage

API Endpoints

When constructing API URLs with dynamic path segments, encode each segment that contains user data:

Original: /api/users/john@utilstation.com/profile
Encoded: /api/users/john%40utilstation.com/profile

Form Data

HTML forms automatically encode data when submitted, but when building form data programmatically, proper encoding is essential.

Security Considerations

Double Encoding

Be careful not to double-encode URLs, which can lead to malformed requests:

Original: hello world
Single encoded: hello%20world
❌ Double encoded: hello%2520world

Injection Attacks

Proper URL encoding helps prevent injection attacks by ensuring that user input is treated as data rather than executable code.

Best Practices

When to Use Each Method

  • encodeURI() - For complete URLs that you want to remain valid
  • encodeURIComponent() - For individual URL parameters and fragments
  • Server-side - Always validate and sanitize decoded data
  • Client-side - Use built-in browser functions rather than manual encoding

Development Workflow

  • Encode user input before including it in URLs
  • Decode URLs when extracting data for processing
  • Test with special characters and non-ASCII input
  • Use URL encoding tools during development and debugging

Programming Examples

JavaScript

// Encoding
const encoded = encodeURIComponent("hello world & more");
// Result: "hello%20world%20%26%20more"
// Decoding
const decoded = decodeURIComponent("hello%20world%20%26%20more");
// Result: "hello world & more"

Python

import urllib.parse
encoded = urllib.parse.quote("hello world & more")
decoded = urllib.parse.unquote("hello%20world%20%26%20more")

Common Encoding Patterns

CharacterEncodedCommon Usage
space%20Most common encoding in URLs
&%26When & appears in query values
=%3DWhen = appears in query values
?%3FWhen ? appears in path or values
#%23When # appears in URLs

Pro Tip

When building URLs programmatically, always encode user-provided data but never encode the URL structure itself. Use encodeURIComponent() for individual pieces of data and construct the full URL afterward.

Common Mistake

Don't encode an entire URL if it's already properly formatted. This will break the URL structure. Only encode the data portions that need encoding.