JavaScript实现一个在线URL编码解码、base65编码解码工具

小艾KJ
于 2024-09-10 14:06:46 发布
阅读量331
点赞数 3
文章标签： html
本文链接：https://blog.csdn.net/vipran888/article/details/142095267
版权
摘要

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文件，就可以解决这几个问题。