Encoding

URL ENCODER

Encode and decode URLs and query strings. Supports encodeURIComponent, full URI encoding, and form percent-encoding.

Mode:

Raw Input

Encoded Output

—

Before: 0 chars After: 0 chars Changed: 0 chars

Encoded Characters

Decode + as space (form encoding)

Encoded Input

Decoded Output

—

Before: 0 chars After: 0 chars

Developer Reference

Core Algorithm & Standalone Script

Standalone, zero-dependency JavaScript implementation powering this tool. Free to inspect, copy, and build upon.

function switchTab(id, el) {
    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
    document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
    el.classList.add('active');
    document.getElementById('panel-' + id).classList.add('active');
  }

  function doEncode() {
    const input = document.getElementById('encodeInput').value;
    const mode = document.getElementById('encodeMode').value;
    let result = '';
    try {
      result = mode === 'component' ? encodeURIComponent(input) : encodeURI(input);
    } catch(e) { result = 'Error: ' + e.message; }
    document.getElementById('encodeOutput').textContent = result || '—';
    document.getElementById('encBefore').textContent = input.length;
    document.getElementById('encAfter').textContent = result.length;
    // Count changed chars
    let changed = 0;
    for (let i = 0; i < input.length; i++) {
      const ch = input[i];
      const enc = mode === 'component' ? encodeURIComponent(ch) : encodeURI(ch);
      if (enc !== ch) changed++;
    }
    document.getElementById('encChanged').textContent = changed;

    // Build char map
    const seen = new Map();
    for (const ch of input) {
      if (!seen.has(ch)) {
        const enc = mode === 'component' ? encodeURIComponent(ch) : encodeURI(ch);
        if (enc !== ch) seen.set(ch, enc);
      }
    }
    const mapEl = document.getElementById('charMap');
    mapEl.innerHTML = Array.from(seen.entries()).slice(0, 60).map(([f,t]) =>
      `<div class="char-map-item"><span class="char-from">${f === ' ' ? '(space)' : f}</span><span class="char-to">${t}</span></div>`
    ).join('');
  }

  function doDecode() {
    const input = document.getElementById('decodeInput').value;
    const decodePlus = document.getElementById('decodePlus').checked;
    let str = decodePlus ? input.replace(/\+/g, ' ') : input;
    let result = '';
    try { result = decodeURIComponent(str); }
    catch(e) { result = 'Error: ' + e.message; }
    document.getElementById('decodeOutput').textContent = result || '—';
    document.getElementById('decBefore').textContent = input.length;
    document.getElementById('decAfter').textContent = result.length;
  }

  function copyOut(srcId, btnId, defaultText) {
    const text = document.getElementById(srcId).textContent;
    if (text === '—') return;
    navigator.clipboard.writeText(text).catch(() => {});
    const btn = document.getElementById(btnId);
    btn.textContent = 'copied!'; btn.classList.add('copied');
    setTimeout(() => { btn.textContent = defaultText; btn.classList.remove('copied'); }, 2000);
  }