{"id":19,"date":"2026-03-19T14:35:25","date_gmt":"2026-03-19T14:35:25","guid":{"rendered":"https:\/\/netguide.io\/tools\/?p=19"},"modified":"2026-03-19T14:35:26","modified_gmt":"2026-03-19T14:35:26","slug":"base62-encoder-decoder","status":"publish","type":"post","link":"https:\/\/netguide.io\/tools\/de\/base62-encoder-decoder\/","title":{"rendered":"Base62 Encoder \/ Decoder"},"content":{"rendered":"\n<div class=\"wp-b62-container\">\n    <h3 class=\"wp-b62-title\">Base62 Converter<\/h3>\n\n    <div class=\"wp-b62-group\">\n        <label>Input Text \/ Base62<\/label>\n        <textarea id=\"wp-b62-input\" placeholder=\"Type or paste here...\" oninput=\"hideError()\"><\/textarea>\n    <\/div>\n\n    <div class=\"wp-b62-actions\">\n        <button onclick=\"processB62('encode')\" class=\"btn-primary\">Encode to Base62<\/button>\n        <button onclick=\"processB62('decode')\" class=\"btn-secondary\">Decode from Base62<\/button>\n    <\/div>\n\n    <div class=\"wp-b62-group\">\n        <label>Result<\/label>\n        <textarea id=\"wp-b62-output\" readonly placeholder=\"Result will appear here...\"><\/textarea>\n    <\/div>\n\n    <div class=\"wp-b62-footer\">\n        <button onclick=\"copyToClipboardB62()\" id=\"btn-copy-b62\">Copy Result<\/button>\n        <button onclick=\"clearB62()\" class=\"btn-danger\">Clear<\/button>\n    <\/div>\n\n    <div id=\"wp-b62-error\" class=\"wp-b62-error-msg\">Invalid Base62 characters detected!<\/div>\n\n    <style>\n        .wp-b62-container { max-width: 100%; background: #fff; padding: 20px; border: 1px solid #ddd; border-radius: 10px; font-family: -apple-system, sans-serif; color: #333; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }\n        .wp-b62-title { margin: 0 0 15px 0; color: #2271b1; font-size: 1.4rem; border-bottom: 1px solid #eee; padding-bottom: 10px; }\n        .wp-b62-group { margin-bottom: 15px; }\n        .wp-b62-group label { display: block; font-size: 11px; font-weight: bold; margin-bottom: 5px; text-transform: uppercase; color: #666; }\n        .wp-b62-group textarea { width: 100%; height: 100px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-family: monospace; font-size: 13px; resize: vertical; box-sizing: border-box; }\n        .wp-b62-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 15px; }\n        \n        .wp-b62-container button { padding: 10px; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; font-size: 13px; transition: 0.2s; }\n        .btn-primary { background: #2271b1; color: #fff; }\n        .btn-primary:hover { background: #135e96; }\n        .btn-secondary { background: #f0f6fb; color: #2271b1; border: 1px solid #2271b1 !important; }\n        .btn-danger { background: #f9f9f9; color: #d63638; border: 1px solid #d63638 !important; }\n        #btn-copy-b62 { background: #46b450; color: #fff; flex-grow: 2; }\n        \n        .wp-b62-footer { display: flex; gap: 10px; }\n        .wp-b62-error-msg { display: none; color: #d63638; font-size: 12px; margin-top: 10px; font-weight: bold; text-align: center; }\n        #wp-b62-output { background: #f9f9f9; border-color: #eee; }\n    <\/style>\n\n    <script>\n        const charset = \"0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ\";\n\n        function hideError() { document.getElementById('wp-b62-error').style.display = 'none'; }\n\n        function processB62(mode) {\n            const input = document.getElementById('wp-b62-input').value;\n            const output = document.getElementById('wp-b62-output');\n            if (!input) return;\n\n            try {\n                if (mode === 'encode') {\n                    output.value = encodeB62(input);\n                } else {\n                    output.value = decodeB62(input);\n                }\n            } catch (e) {\n                document.getElementById('wp-b62-error').style.display = 'block';\n            }\n        }\n\n        function encodeB62(str) {\n            let bytes = new TextEncoder().encode(str);\n            let hex = Array.from(bytes).map(b => b.toString(16).padStart(2, '0')).join('');\n            let num = BigInt('0x' + hex);\n            let res = '';\n            while (num > 0n) {\n                res = charset[Number(num % 62n)] + res;\n                num \/= 62n;\n            }\n            return res || '0';\n        }\n\n        function decodeB62(b62) {\n            let num = 0n;\n            for (let char of b62) {\n                let index = charset.indexOf(char);\n                if (index === -1) throw new Error();\n                num = num * 62n + BigInt(index);\n            }\n            let hex = num.toString(16);\n            if (hex.length % 2 !== 0) hex = '0' + hex;\n            let bytes = new Uint8Array(hex.match(\/.{1,2}\/g).map(byte => parseInt(byte, 16)));\n            return new TextDecoder().decode(bytes);\n        }\n\n        function copyToClipboardB62() {\n            const out = document.getElementById('wp-b62-output');\n            if (!out.value) return;\n            navigator.clipboard.writeText(out.value).then(() => {\n                const btn = document.getElementById('btn-copy-b62');\n                const old = btn.innerText;\n                btn.innerText = 'Copied!';\n                setTimeout(() => btn.innerText = old, 2000);\n            });\n        }\n\n        function clearB62() {\n            document.getElementById('wp-b62-input').value = '';\n            document.getElementById('wp-b62-output').value = '';\n            hideError();\n        }\n    <\/script>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Erl\u00e4uterung &amp; Tipps<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Was ist der Unterschied zu Base64?<\/h3>\n\n\n\n<p>W\u00e4hrend <a href=\"https:\/\/netguide.io\/tools\/de\/base64-encoder-decoder\/\">Base64<\/a> 64 Zeichen nutzt (inklusive <code>+<\/code>, <code>\/<\/code> und dem F\u00fcllzeichen <code>=<\/code>), beschr\u00e4nkt sich Base64 auf 62 Zeichen: <strong>0-9, a-z und A-Z<\/strong>.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Vorteil:<\/strong> Es entstehen keine &#8220;h\u00e4sslichen&#8221; Sonderzeichen. Ein Base62-String kann problemlos \u00fcberall dort verwendet werden, wo nur alphanumerische Zeichen erlaubt sind (z.B. in Dateinamen oder als Teil einer URL, ohne dass ein <code>urlencode<\/code> n\u00f6tig w\u00e4re).<\/li>\n\n\n\n<li><strong>Nachteil:<\/strong> Base62 ist rechnerisch etwas aufwendiger als Base64, da es nicht auf einer einfachen Bit-Verschiebung basiert, sondern auf mathematischer Division (Modulo 62).<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Wann sollte man Base62 nutzen?<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>URL-Shortening:<\/strong> Wenn du kurze, saubere Links generieren willst.<\/li>\n\n\n\n<li><strong>ID-Generierung:<\/strong> Um Datenbank-IDs (wie <code>1029384<\/code>) in kurze, schwerer zu erratende Strings umzuwandeln.<\/li>\n\n\n\n<li><strong>Dateinamen:<\/strong> Wenn du Daten in Dateisystemen speichern willst, die bei Sonderzeichen zickig reagieren.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Base62 Converter Input Text \/ Base62 Encode to Base62 Decode from Base62 Result Copy Result Clear Invalid Base62 characters detected! [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[23],"tags":[31],"class_list":["post-19","post","type-post","status-publish","format-standard","hentry","category-decoder-encoder","tag-base62"],"_links":{"self":[{"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/posts\/19","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/comments?post=19"}],"version-history":[{"count":1,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/posts\/19\/revisions"}],"predecessor-version":[{"id":20,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/posts\/19\/revisions\/20"}],"wp:attachment":[{"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/media?parent=19"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/categories?post=19"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/netguide.io\/tools\/wp-json\/wp\/v2\/tags?post=19"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}