Skip to main content
The URL Encode/Decode tool handles URL percent-encoding (also known as URL encoding) for safely transmitting data in URLs. It supports multiple encoding modes including URI encoding, component encoding, and form encoding with space handling.

​
Features

  • Standard URI encoding (RFC 3986)
  • Component-level encoding for query parameters
  • Form encoding with space-to-plus conversion
  • Bidirectional encoding/decoding
  • Preserves safe characters
  • Handles international (UTF-8) characters

​
Use Cases

Query Parameters

Encode values for safe inclusion in URL query strings

Form Submissions

Encode form data using application/x-www-form-urlencoded format

API Requests

Prepare URL parameters for HTTP API calls

URL Parsing

Decode percent-encoded URLs to read original values

​
Encoding Modes

​
Default (URI Encoding)

Encodes characters unsafe for URLs but preserves some delimiters: 
hello world&foo=bar → hello%20world&foo=bar
URI encoding preserves these characters: A-Z a-z 0-9 - _ . ! ~ * ' ( ) plus URI delimiters ;/?:@&=+$,#

​
Component Encoding

Encodes all special characters including delimiters: 
hello world&foo=bar → hello%20world%26foo%3Dbar
Use this for individual query parameter values.

​
Form Encoding

Like component encoding but uses + for spaces: 
hello world&foo=bar → hello+world%26foo%3Dbar
This is the application/x-www-form-urlencoded format.

​
Actions

ActionDescriptionSpace Handling
defaultURI encode%20
componentComponent encode%20
formForm encode+
decodeURI decodeBoth %20 and +
form-decodeForm decode+ → space

​
Examples

Encode a value for use in a query string.Input:
[email protected]
Action: componentOutput:
user%40example.com
Usage:
https://api.example.com/users?email=user%40example.com

​
Implementation Details

From lib/tools/engine.ts:455-461: 
case 'url-encode-decode': {
  if (action === 'decode') 
    return { output: decodeURIComponent(input) };
  if (action === 'form-decode') 
    return { output: decodeURIComponent(input.replaceAll('+', ' ')) };
  if (action === 'component') 
    return { output: encodeURIComponent(input) };
  if (action === 'form') 
    return { output: encodeURIComponent(input).replaceAll('%20', '+') };
  return { output: encodeURI(input) };
}

​
Character Encoding Reference

​
Always Safe (Never Encoded)

A-Z a-z 0-9 - _ . ~

​
URI Delimiters (Preserved by encodeURI)

: / ? # [ ] @ ! $ & ' ( ) * + , ; =

​
Common Encodings

CharacterEncodedDescription
(space)%20 or +Space
!%21Exclamation
#%23Hash/pound
$%24Dollar
%%25Percent
&%26Ampersand
+%2BPlus
/%2FForward slash
:%3AColon
=%3DEquals
?%3FQuestion mark
@%40At sign

​
Common Patterns

​
Building Query Strings

const params = {
  q: 'hello world',
  filter: 'category:books',
  limit: 10
};

const query = Object.entries(params)
  .map(([k, v]) => `${k}=${encodeURIComponent(v)}`)
  .join('&');

// Result: q=hello%20world&filter=category%3Abooks&limit=10

​
Decoding URL Parameters

const url = new URL('https://example.com?name=John%20Doe&email=john%40example.com');
const name = url.searchParams.get('name');   // "John Doe"
const email = url.searchParams.get('email'); // "[email protected]"

​
Form POST Body

const formData = {
  username: 'john@example',
  password: 'p@ssw0rd!',
  remember: 'true'
};

const body = Object.entries(formData)
  .map(([k, v]) => `${k}=${encodeURIComponent(v).replaceAll('%20', '+')}` )
  .join('&');

// Content-Type: application/x-www-form-urlencoded
// username=john%40example&password=p%40ssw0rd!&remember=true

​
URI vs Component Encoding

Use for: Entire URLsPreserves: : / ? # [ ] @ ! $ & ' ( ) * + , ; =Example:
encodeURI('https://example.com/path?q=hello world')
// → https://example.com/path?q=hello%20world
✅ Good for encoding full URLs while keeping structure

​
Double Encoding

Avoid double-encoding! Encoding an already-encoded string produces incorrect results:
encodeURIComponent('hello')              // "hello"
encodeURIComponent('hello%20world')      // "hello%2520world" ❌
Always decode before re-encoding.

​
Browser APIs

​
URLSearchParams

Modern API for working with query strings: 
const params = new URLSearchParams();
params.set('name', 'John Doe');
params.set('email', '[email protected]');
params.toString();
// → name=John+Doe&email=john%40example.com

​
URL API

Parse and construct URLs: 
const url = new URL('https://example.com');
url.searchParams.set('q', 'hello world');
url.toString();
// → https://example.com/?q=hello+world

Build docs developers (and LLMs) love

Get started for freeTalk to us