<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Base64编码转换工具</title>
    <script>
      function encodeBase64() {
        var originalText = document.getElementById("originalText").value;
        var encodedResult = document.getElementById("encodedResult");

        // 按行分割待编码内容
        var lines = originalText.split(/\r?\n/);
        var encodedText = "";

        // 逐行编码
        for (var i = 0; i < lines.length; i++) {
          // 编码当前行的文本
          var line = lines[i].trim();
          var encodedLine = btoa(line);

          // 添加编码结果到变量中
          encodedText += encodedLine + "\n";
        }

        // 显示编码结果
        encodedResult.value = encodedText.trim();
      }

      function decodeBase64() {
        var encodedText = document.getElementById("encodedText").value;
        var decodedResult = document.getElementById("decodedResult");

        // 按行分割编码内容
        var lines = encodedText.split(/\r?\n/);
        var decodedText = "";

        // 逐行解码
        for (var i = 0; i < lines.length; i++) {
          // 解码当前行的Base64编码内容
          var line = lines[i].trim();
          var decodedLine = atob(line);

          // 添加解码后的文本到结果中
          decodedText += decodedLine + "\n";
        }

        // 显示解码结果
        decodedResult.value = decodedText.trim();
      }
    </script>
  </head>
  <body>
    <h1>Base64编码转换工具</h1>

    <h2>编码:</h2>
    <textarea id="originalText" rows="10" cols="50"></textarea>
    <br />
    <button onclick="encodeBase64()">编码</button>
    <br />
    <textarea id="encodedResult" rows="10" cols="50"></textarea>

    <h2>解码:</h2>
    <textarea id="encodedText" rows="10" cols="50"></textarea>
    <br />
    <button onclick="decodeBase64()">解码</button>
    <br />
    <textarea id="decodedResult" rows="10" cols="50"></textarea>
  </body>
</html>