Usage Examples

Input: Hello World!
Encoded: Hello%20World%21

Input: user@example.com
Encoded: user%40example.com

Input: 100% success rate
Encoded: 100%25%20success%20rate

Input: Price: $29.99 (on sale!)
Encoded: Price%3A%20%2429.99%20%28on%20sale%21%29

Input: C++ programming & web development
Encoded: C%2B%2B%20programming%20%26%20web%20development

Input: Search for "best practices"
Encoded: Search%20for%20%22best%20practices%22

Input: Café München
Encoded: Caf%C3%A9%20M%C3%BCnchen

Input: こんにちは世界
Encoded: %E3%81%93%E3%82%93%E3%81%AB%E3%81%A1%E3%81%AF%E4%B8%96%E7%95%8C

Input: Здравствуй мир
Encoded: %D0%97%D0%B4%D1%80%D0%B0%D0%B2%D1%81%D1%82%D0%B2%D1%83%D0%B9%20%D0%BC%D0%B8%D1%80

<!-- Original form -->
<form action="/search" method="GET">
  <input name="q" value="JavaScript tutorials" />
  <input name="category" value="web development" />
  <input name="sort" value="most recent" />
</form>

<!-- Resulting URL -->
/search?q=JavaScript%20tutorials&category=web%20development&sort=most%20recent

Original Parameters:
- tags: ["javascript", "react", "node.js"]
- date_range: "2023-01-01 to 2023-12-31"
- author: "John Doe <john@example.com>"

Encoded Query String:
?tags=javascript&tags=react&tags=node.js&date_range=2023-01-01%20to%202023-12-31&author=John%20Doe%20%3Cjohn%40example.com%3E

// Building API endpoints with encoded parameters
const apiBase = 'https://api.example.com';
const searchTerm = 'React & Node.js tutorials';
const category = 'web development';
const tags = ['javascript', 'tutorial', 'beginner-friendly'];

// Encoded parameters
const encodedSearch = encodeURIComponent(searchTerm);
const encodedCategory = encodeURIComponent(category);
const encodedTags = tags.map((tag) => encodeURIComponent(tag)).join(',');

const apiUrl = `${apiBase}/search?q=${encodedSearch}&category=${encodedCategory}&tags=${encodedTags}`;
// Result: https://api.example.com/search?q=React%20%26%20Node.js%20tutorials&category=web%20development&tags=javascript%2Ctutorial%2Cbeginner-friendly

// GraphQL query with encoded variables
const query = `
  query GetUser($email: String!) {
    user(email: $email) {
      id
      name
      profile
    }
  }
`;

const variables = {
  email: 'user+test@example.com',
};

// When sending via URL (GET request)
const encodedQuery = encodeURIComponent(query);
const encodedVariables = encodeURIComponent(JSON.stringify(variables));
const graphqlUrl = `${endpoint}?query=${encodedQuery}&variables=${encodedVariables}`;

<!-- Contact form with special characters -->
<form method="POST" action="/contact">
  <input name="name" value="María José" />
  <input name="email" value="maria@dominio.es" />
  <textarea name="message">
Hi there! I'm interested in your services. 
Can you provide more info about pricing & availability?

Best regards,
María</textarea
  >
</form>

<!-- Encoded form data -->
name=Mar%C3%ADa%20Jos%C3%A9&email=maria%40dominio.es&message=Hi%20there%21%20I%27m%20interested%20in%20your%20services.%20%0ACan%20you%20provide%20more%20info%20about%20pricing%20%26%20availability%3F%0A%0ABest%20regards%2C%0AMar%C3%ADa

Original Product Info:
- Name: "Women's Running Shoes - Size 7.5"
- Category: "Athletic Footwear & Accessories"
- SKU: "WRS-7.5-BLU/WHT"

Encoded Product URL:
/products/Women%27s%20Running%20Shoes%20-%20Size%207.5?category=Athletic%20Footwear%20%26%20Accessories&sku=WRS-7.5-BLU%2FWHT

Cart Items:
1. Product: "MacBook Pro 13" M2 (2022)"
   Options: "Space Gray, 512GB SSD"
   Quantity: 1

2. Product: "USB-C to USB-A Adapter"
   Options: "White, 2-pack"
   Quantity: 2

Encoded Cart URL:
/cart?item1=MacBook%20Pro%2013%22%20M2%20%282022%29&options1=Space%20Gray%2C%20512GB%20SSD&qty1=1&item2=USB-C%20to%20USB-A%20Adapter&options2=White%2C%202-pack&qty2=2

// Twitter share URL
const tweetText = 'Check out this amazing URL encoder tool! 🚀 #webdev #tools';
const url = 'https://example.com/url-encoder';
const hashtags = 'webdev,tools,development';

const twitterUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(tweetText)}&url=${encodeURIComponent(url)}&hashtags=${encodeURIComponent(hashtags)}`;
// Result: https://twitter.com/intent/tweet?text=Check%20out%20this%20amazing%20URL%20encoder%20tool%21%20%F0%9F%9A%80%20%23webdev%20%23tools&url=https%3A%2F%2Fexample.com%2Furl-encoder&hashtags=webdev%2Ctools%2Cdevelopment

// Facebook share URL
const fbTitle = 'URL Encoder/Decoder Tool';
const fbDescription = 'Encode & decode URLs quickly and securely';
const fbImage = 'https://example.com/images/tool-preview.jpg';

const facebookUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}&title=${encodeURIComponent(fbTitle)}&description=${encodeURIComponent(fbDescription)}&picture=${encodeURIComponent(fbImage)}`;

const linkedinTitle = 'Discover the Ultimate URL Encoding Tool';
const linkedinSummary =
  'A comprehensive tool for encoding and decoding URLs with advanced features and security considerations.';
const linkedinSource = 'Developer Tools Collection';

const linkedinUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}&title=${encodeURIComponent(linkedinTitle)}&summary=${encodeURIComponent(linkedinSummary)}&source=${encodeURIComponent(linkedinSource)}`;

Campaign Information:
- Source: "newsletter"
- Medium: "email"
- Campaign: "summer sale 2023"
- Term: "discount shoes"
- Content: "header link"

Base URL: https://example.com/products/shoes

UTM Encoded URL:
https://example.com/products/shoes?utm_source=newsletter&utm_medium=email&utm_campaign=summer%20sale%202023&utm_term=discount%20shoes&utm_content=header%20link

// Enhanced ecommerce tracking parameters
const ecommerceData = {
  ec: 'purchase',
  ea: 'transaction',
  el: 'Order #12345',
  ev: 299.99,
  tid: 'UA-12345678-1',
  cid: 'user123',
  ti: '12345',
  ta: 'Online Store',
  tr: 299.99,
  ts: 15.0,
  tt: 25.0,
  cu: 'USD',
};

// Build encoded tracking URL
const trackingParams = Object.entries(ecommerceData)
  .map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
  .join('&');

const trackingUrl = `https://www.google-analytics.com/collect?${trackingParams}`;

Original File Names:
- "Project Proposal (Final Draft).pdf"
- "Images/Screenshot 2023-12-01 at 10.30.15 AM.png"
- "Code Examples/hello_world.js"

Encoded File URLs:
/uploads/Project%20Proposal%20%28Final%20Draft%29.pdf
/uploads/Images%2FScreenshot%202023-12-01%20at%2010.30.15%20AM.png
/uploads/Code%20Examples%2Fhello_world.js

// File management API
const fileName = 'user documents/tax_2023.xlsx';
const userId = 'user@company.com';
const action = 'download';

const apiEndpoint = `/api/files/${encodeURIComponent(fileName)}?user=${encodeURIComponent(userId)}&action=${action}`;
// Result: /api/files/user%20documents%2Ftax_2023.xlsx?user=user%40company.com&action=download

// OAuth authorization URL
const clientId = 'your-app-id';
const redirectUri = 'https://yourapp.com/auth/callback?state=success';
const scope = 'read:user read:email';
const state = 'random-state-string-123';

const authUrl = `https://github.com/login/oauth/authorize?client_id=${clientId}&redirect_uri=${encodeURIComponent(redirectUri)}&scope=${encodeURIComponent(scope)}&state=${state}`;
// Result: https://github.com/login/oauth/authorize?client_id=your-app-id&redirect_uri=https%3A%2F%2Fyourapp.com%2Fauth%2Fcallback%3Fstate%3Dsuccess&scope=read%3Auser%20read%3Aemail&state=random-state-string-123

// Secure token sharing (not recommended for sensitive data)
const token =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c';
const verificationUrl = `https://example.com/verify?token=${encodeURIComponent(token)}`;

Original: https://example.com/search?q=hello world
First Encoding: https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dhello%20world
Second Encoding: https%253A%252F%252Fexample.com%252Fsearch%253Fq%253Dhello%2520world

// Use case: Passing URLs as parameters
const baseUrl = "https://proxy.example.com/fetch";
const targetUrl = "https://api.example.com/search?q=hello world";
const proxyUrl = `${baseUrl}?url=${encodeURIComponent(targetUrl)}`;

// Processing multiple URLs
const urls = [
  'https://example.com/page with spaces',
  'https://example.com/search?q=hello&world',
  'https://example.com/user@email.com',
  'https://example.com/path/to/file (copy).txt',
];

const encodedUrls = urls.map((url) => {
  try {
    return encodeURIComponent(url);
  } catch (error) {
    console.error(`Failed to encode: ${url}`, error);
    return url; // Return original on error
  }
});

console.log(encodedUrls);
// Results:
// [
//   "https%3A%2F%2Fexample.com%2Fpage%20with%20spaces",
//   "https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dhello%26world",
//   "https%3A%2F%2Fexample.com%2Fuser%40email.com",
//   "https%3A%2F%2Fexample.com%2Fpath%2Fto%2Ffile%20%28copy%29.txt"
// ]

// Handling malformed percent encoding
const malformedInputs = [
  'hello%world', // Invalid % encoding
  'test%2', // Incomplete % encoding
  'data%GG', // Invalid hex digits
  'normal text', // No encoding needed
];

malformedInputs.forEach((input) => {
  try {
    const decoded = decodeURIComponent(input);
    console.log(`✓ Decoded: ${input} → ${decoded}`);
  } catch (error) {
    console.log(`✗ Failed: ${input} - ${error.message}`);
    // Fallback: treat as literal text
    console.log(`  Treating as literal: ${input}`);
  }
});