web-toolkit/url-encoder-decoder.html at master · pyfile-toolkit/web-toolkit · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<script type="application/ld+json">
{"@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{"@type": "ListItem", "position": 1, "name": "Web Dev Toolkit", "item": "https://pyfile-toolkit.github.io/web-toolkit/"}, {"@type": "ListItem", "position": 2, "name": "URL Encoder/Decoder — Percent-Encode & Decode Text Online", "item": "https://pyfile-toolkit.github.io/web-toolkit/url-encoder-decoder.html"}]}
</script>

<meta property="og:title" content="URL Encoder/Decoder — Percent-Encode & Decode Text Online">
<meta property="og:description" content="Free online URL encoder & decoder. Percent-encode text, query parameters and whole URLs, or decode %-escaped strings. Private — runs entirely in your browser.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://pyfile-toolkit.github.io/web-toolkit/url-encoder-decoder.html">
<meta property="og:image" content="https://pyfile-toolkit.github.io/web-toolkit/og-image.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="URL Encoder/Decoder — Percent-Encode & Decode Text Online">
<meta name="twitter:description" content="Free online URL encoder & decoder. Percent-encode text, query parameters and whole URLs, or decode %-escaped strings. Private — runs entirely in your browser.">
<meta name="twitter:image" content="https://pyfile-toolkit.github.io/web-toolkit/og-image.png"><link rel="icon" href="favicon.ico" sizes="any">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-RDDV2FW9HY"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-RDDV2FW9HY');
</script>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>URL Encoder/Decoder — Percent-Encode & Decode Text Online</title>
<link rel="canonical" href="https://pyfile-toolkit.github.io/web-toolkit/url-encoder-decoder.html">
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebApplication",
  "name": "URL Encoder/Decoder",
  "operatingSystem": "ANY",
  "applicationCategory": "UtilitiesApplication",
  "description": "Percent-encode or decode text, query parameters and URLs. Instant, free, private.",
  "offers": {"@type": "Offer", "price": "0", "priceCurrency": "USD"}
}
</script>
<meta name="description" content="Free online URL encoder & decoder. Percent-encode text, query parameters and whole URLs, or decode %-escaped strings. Private — runs entirely in your browser.">
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:system-ui,sans-serif;background:#0f172a;color:#e2e8f0;display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:20px}
.card{background:#1e293b;border-radius:16px;padding:28px;max-width:720px;width:100%}
h1{color:#f8fafc;margin-bottom:4px;font-size:1.4rem}
.sub{color:#94a3b8;margin-bottom:20px;font-size:.9rem}
textarea{width:100%;min-height:150px;padding:14px;border-radius:10px;background:#0f172a;color:#e2e8f0;border:1px solid #475569;font-size:1rem;line-height:1.5;resize:vertical}
.outbox{width:100%;min-height:150px;padding:14px;border-radius:10px;background:#0f172a;color:#e2e8f0;border:1px solid #818cf8;font-size:1rem;line-height:1.5;margin-top:12px;white-space:pre-wrap;word-break:break-word}
.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:16px}
.case{background:#334155;border-radius:10px;padding:12px;text-align:center;cursor:pointer;border:none;color:#e2e8f0;font-size:.95rem;transition:background .15s}
.case:hover{background:#4f46e5}
.case .n{font-weight:700;color:#818cf8;display:block;margin-bottom:2px}
.btns{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
button{padding:9px 22px;background:#6366f1;color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;font-size:.9rem}
button:hover{background:#4f46e5}
.btn-ghost{background:#64748b}
.kofi{text-align:center;margin:16px 0 6px;padding:10px;background:#1e1e3a;border-radius:8px}
.kofi a{color:#ff5e5b;font-weight:600;text-decoration:none}
.ads{margin-top:10px;font-size:.85rem;text-align:center}
.ads a{color:#818cf8;margin:0 6px}
.content{margin-top:30px;max-width:720px;padding:0 6px}
.content h2{color:#f8fafc;font-size:1.15rem;margin:22px 0 10px}
.content p{color:#cbd5e1;line-height:1.65;margin-bottom:12px;font-size:.95rem}
.content strong{color:#e2e8f0}
.content code{background:#1e293b;padding:2px 6px;border-radius:6px;color:#a5b4fc;font-size:.9em}
@media(max-width:520px){body{padding:12px}.card{padding:18px}.content h2{font-size:1.05rem}}
</style>

<script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"Is my data private?","acceptedAnswer":{"@type":"Answer","text":"Yes — encoding and decoding run entirely in this tab, nothing is uploaded."}},{"@type":"Question","name":"Why did decoding fail?","acceptedAnswer":{"@type":"Answer","text":"The tool shows an error state when the input contains invalid escapes such as a lone % or truncated %XX."}},{"@type":"Question","name":"UTF-8 or Latin-1?","acceptedAnswer":{"@type":"Answer","text":"Modern percent-encoding is UTF-8; emoji and non-Latin scripts encode to multi-byte sequences, which this tool handles correctly."}}]}</script>
<link rel="stylesheet" href="assets/styles.css">
<script src="assets/site.js" defer></script>
</head>
<body>
<div class="card">
<h1>URL Encoder/Decoder</h1>
<p class="sub">Percent-encode or decode text, query parameters and full URLs. Everything runs locally — nothing is uploaded.</p>
<textarea id="inp" placeholder="Type or paste text to encode / decode..."></textarea>
<div class="outbox" id="out" placeholder="Result appears here..."></div>
<div class="cases" id="cases"></div>
<div class="btns">
  <button class="btn-ghost" onclick="copyOut()">📋 Copy Result</button>
  <button class="btn-ghost" onclick="clearAll()">🗑 Clear</button>
</div>
<div class="kofi"><a href="https://ko-fi.com/pyfiletoolkit" target="_blank">☕ Support this tool on Ko-fi</a></div>
<div class="ads">
<a href="https://pyfile-toolkit.github.io/web-toolkit/">← Toolkit</a> |
<a href="https://pyfile-toolkit.github.io/web-toolkit/word-counter.html">Word Counter</a> |
<a href="https://pyfile-toolkit.github.io/web-toolkit/character-counter.html">Character Counter</a> |
<a href="https://pyfile-toolkit.github.io/web-toolkit/base64-encoder.html">Base64 Encoder</a> |
<a href="https://pyfiletoolkit.gumroad.com/">Premium</a>
 · <a href="privacy.html">Privacy</a> · <a href="about.html">About</a></div>
</div>

<div class="related" style="font-family:system-ui;font-size:.85rem;color:#64748b;text-align:center;margin-top:14px">More tools: <a href="html-minifier.html">HTML Minifier</a> · <a href="jwt-decoder.html">JWT Decoder</a> · <a href="unix-timestamp-converter.html">Unix Timestamp</a> · <a href="slug-generator.html">Slug Generator</a></div>
<div class="content">
<h2>URL Encoder/Decoder — Percent-Encoding Made Simple</h2>
<p>This free URL encoder and decoder percent-encodes text, query strings and whole URLs in your browser. It supports <strong>component encoding</strong> (for a single query value), <strong>whole-URL encoding</strong> (keeps <code>://</code>, <code>?</code>, <code>&amp;</code> intact and encodes only what needs escaping), and a <strong>strict RFC 3986 mode</strong>. Decoding handles malformed input gracefully. No data is ever sent to a server.</p>
<h2>What Is Percent-Encoding?</h2>
<p>Percent-encoding (also called URL encoding) replaces characters outside the safe URL alphabet with a <code>%</code> followed by two hex digits, for example <code>ä</code> becomes <code>%C3%A4</code> in UTF-8. Reserved characters like <code>&amp;</code>, <code>?</code>, <code>=</code> and spaces must be encoded when they appear inside a query value; otherwise a URL would be ambiguous or break.</p>
<h2>Component vs Whole-URL Encoding</h2>
<p><strong>Component mode</strong> (<code>encodeURIComponent</code>) encodes every reserved character, so it is the safest choice for a single query value. <strong>Whole-URL mode</strong> (<code>encodeURI</code>) leaves URL structure (<code>https://</code>, <code>?</code>, <code>#</code>, <code>&amp;</code>, <code>=</code>) intact and is meant for complete addresses. <strong>Strict mode</strong> keeps only unreserved characters (<code>A-Z a-z 0-9 - _ . ~</code>) — the canonical form for signing and hashing URL-encoded payloads.</p>
<h2>URL Encoder/Decoder FAQ</h2>
<p><strong>Is my data private?</strong> Yes — encoding and decoding run entirely in this tab, nothing is uploaded. <strong>Why did decoding fail?</strong> The tool shows an error state when the input contains invalid escapes such as a lone <code>%</code> or truncated <code>%XX</code>. <strong>UTF-8 or Latin-1?</strong> Modern percent-encoding is UTF-8; emoji and non-Latin scripts encode to multi-byte sequences, which this tool handles correctly.</p>
</div>
<div id="crypto-donate"></div>
<script src="scripts/url-lib.js"></script>
<script src="donate.js"></script>
<script>
const U = window.UrlLib;
const inp = document.getElementById('inp');
const out = document.getElementById('out');

const cases = [
  {name:'Encode Component', n:'a%20b%26c', fn:U.encodeComponent},
  {name:'Decode Component', n:'a b&c', fn:U.decodeComponent},
  {name:'Encode URL', n:'a%20b?q=1', fn:U.encodeAll},
  {name:'Decode URL', n:'a b?q=1', fn:U.decodeAll},
  {name:'Encode Strict', n:'a%20b%26c', fn:U.encodeStrict},
  {name:'Decode Strict', n:'a b&c', fn:U.decodeStrict}
];
const wrap = document.getElementById('cases');
cases.forEach(c=>{
  const b = document.createElement('button');
  b.className = 'case';
  b.innerHTML = '<span class="n">'+c.name+'</span>'+c.fn('sample text');
  b.onclick = ()=>{
    const r = c.fn(inp.value);
    if(r === null){ out.textContent = '⚠ Invalid %-escape sequence — cannot decode.'; }
    else { out.textContent = r; }
  };
  wrap.appendChild(b);
});
function copyOut(){navigator.clipboard.writeText(out.textContent);}
function clearAll(){inp.value='';out.textContent='';inp.focus();}
</script>
</body>
</html>