JavaScript實現一個在線URL編碼解碼、base65編碼解碼工具詳情 - javascript,前端,urlencode,urldecode,base64 TANKING 博客

摘要

url編碼解碼在開發調試的時候很常見，還有base64編碼解碼，都是日常開發使用的，因此需要藉助一些工具快速實現編碼解碼。在很多編程語言都有url編碼解碼，base64編碼解碼的函數，本次使用的是javascript實現的編碼解碼功能。
上代碼

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>編碼解碼字符處理在線工具 - URL編碼URL解碼encodeURI解碼encodeURIComponent解碼URL參數分割Base64編碼Base64解碼</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css">
    <meta name="description" content="提供多種編碼解碼工具，包括URL編碼、URL解碼、encodeURI解碼、encodeURIComponent解碼、URL參數分割、Base64編碼和Base64解碼。幫助用户輕鬆轉換和處理各種編碼格式。">
    <meta name="keywords" content="編碼解碼工具, URL編碼, URL解碼, encodeURI解碼, encodeURIComponent解碼, URL參數分割, Base64編碼, Base64解碼, 在線工具">
    <meta name="robots" content="index, follow">
    <meta property="og:title" content="在線編碼解碼工具">
    <meta property="og:description" content="使用我們的工具輕鬆進行URL編碼、URL解碼、encodeURI解碼、encodeURIComponent解碼、URL參數分割、Base64編碼和Base64解碼。">
    <meta property="og:image" content="https://likeyunkeji.likeyunba.com/devTools/logo.jpg">
    <meta property="og:url" content="https://likeyunkeji.likeyunba.com/devTools">
    <meta property="og:type" content="website">
    <meta name="author" content="裏客雲科技">
    <link rel="canonical" href="https://likeyunkeji.likeyunba.com/devTools">
    <link rel="icon" href="logo.jpg" type="image/x-icon">
    <link rel="shortcut icon" href="logo.jpg" type="image/x-icon">
    <style>
        *{
            padding: 0;
            margin: 0;
            font-family: "Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3",FontAwesome,sans-serif;
        }
        body {
            padding: 20px;
            background: #f2f3f3;
        }
        /*PC AND PAD*/
        @media screen and (min-width: 640px) and (max-width: 2000px) {
            .container {
                margin: 30px auto;
                width: 60%;
            }
        }
        /*PHONE*/
        @media screen and (max-width: 639px) {
            .container {
                margin: 30px auto;
                width: 100%;
            }
        }
        .text-center {
            margin: 25px 0;
        }
        textarea {
            resize: none;
            overflow: hidden;
        }
        button {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2 class="text-center">編碼解碼字符處理在線工具</h2>
        <div class="mb-3">
            <label for="inputText" class="form-label">輸入文本:</label>
            <textarea id="inputText" class="form-control" rows="8"></textarea>
        </div>
        <div class="mb-3 text-center">
            <button id="encodeBtn" class="btn btn-primary me-2">URL 編碼</button>
            <button id="decodeURIBtn" class="btn btn-secondary me-2">encodeURI 解碼</button>
            <button id="decodeURIComponentBtn" class="btn btn-secondary me-2" title="對特殊符號解碼">encodeURIComponent 解碼</button>
            <button id="splitParamsBtn" class="btn btn-secondary me-2">URL參數分割</button>
            <button id="encodeBase64Btn" class="btn btn-success me-2">Base64 編碼</button>
            <button id="decodeBase64Btn" class="btn btn-warning">Base64 解碼</button>
        </div>
        <div class="mb-3">
            <label for="outputText" class="form-label">輸出文本:</label>
            <textarea id="outputText" class="form-control" rows="8" style="background: #eee;"></textarea>
        </div>
        <div class="text-center">
            <button id="copyBtn" class="btn btn-secondary me-2">一鍵複製</button>
        </div>
    </div>

    <script>
        function autoResizeTextarea(textarea) {
            textarea.style.height = 'auto';
            textarea.style.height = textarea.scrollHeight + 'px';
        }

        document.getElementById('encodeBtn').addEventListener('click', function() {
            const inputText = document.getElementById('inputText').value;
            const encodedText = encodeURIComponent(inputText);
            const outputTextarea = document.getElementById('outputText');
            outputTextarea.value = encodedText;
            autoResizeTextarea(outputTextarea);
        });

        document.getElementById('decodeURIBtn').addEventListener('click', function() {
            const inputText = document.getElementById('inputText').value;
            try {
                const decodedText = decodeURI(inputText);
                const outputTextarea = document.getElementById('outputText');
                outputTextarea.value = decodedText;
                autoResizeTextarea(outputTextarea);
            } catch (e) {
                alert('解碼錯誤，請確保輸入的編碼類型正確。');
            }
        });

        document.getElementById('decodeURIComponentBtn').addEventListener('click', function() {
            const inputText = document.getElementById('inputText').value;
            try {
                const decodedText = decodeURIComponent(inputText);
                const outputTextarea = document.getElementById('outputText');
                outputTextarea.value = decodedText;
                autoResizeTextarea(outputTextarea);
            } catch (e) {
                alert('解碼錯誤，請確保輸入的編碼類型正確。');
            }
        });

        document.getElementById('splitParamsBtn').addEventListener('click', function() {
            const inputText = document.getElementById('inputText').value;
            try {
                let params;
                if (inputText.includes('?')) {
                    const url = new URL(inputText);
                    params = new URLSearchParams(url.search);
                } else {
                    params = new URLSearchParams(inputText);
                }
                let result = '';
                params.forEach((value, key) => {
                    result += `${key}: ${value}\n`;
                });
                const outputTextarea = document.getElementById('outputText');
                outputTextarea.value = result;
                autoResizeTextarea(outputTextarea);
            } catch (e) {
                alert('請輸入有效的URL或參數字符串。');
            }
        });

        document.getElementById('encodeBase64Btn').addEventListener('click', function() {
            const inputText = document.getElementById('inputText').value;
            const encodedText = btoa(inputText);
            const outputTextarea = document.getElementById('outputText');
            outputTextarea.value = encodedText;
            autoResizeTextarea(outputTextarea);
        });

        document.getElementById('decodeBase64Btn').addEventListener('click', function() {
            const inputText = document.getElementById('inputText').value;
            try {
                const decodedText = atob(inputText);
                const outputTextarea = document.getElementById('outputText');
                outputTextarea.value = decodedText;
                autoResizeTextarea(outputTextarea);
            } catch (e) {
                alert('解碼錯誤，請確保輸入的編碼類型正確。');
            }
        });

        document.getElementById('copyBtn').addEventListener('click', function() {
            const outputText = document.getElementById('outputText');
            outputText.select();
            outputText.setSelectionRange(0, 99999); // 對移動設備的兼容
            navigator.clipboard.writeText(outputText.value).then(() => {
                const copyBtn = document.getElementById('copyBtn');
                const originalText = copyBtn.textContent;
                copyBtn.textContent = '已複製';
                setTimeout(() => {
                    copyBtn.textContent = originalText;
                }, 2000);
            }).catch(err => {
                alert('複製失敗，請手動複製');
            });
        });

        document.getElementById('outputText').addEventListener('input', function() {
            autoResizeTextarea(this);
        });

        window.addEventListener('load', function() {
            document.querySelectorAll('textarea').forEach(autoResizeTextarea);
        });
    </script>

    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>
就只有一個html文件，就可以解決這幾個問題。