先将字符串进行UTF-8转码,然后在UTF-8的基础上进行base64编码

chenyajun  2022-10-16 13:23:04  阅读 1094 次 评论 0 条
<!DOCTYPE html>    <html>    <head>    <title></title>    <style type="text/css">    
    * {    
      box-sizing: border-box;    
    }    
    .input,    
    .output {    
      width: 400px;    
      height: 200px;    
    }    
    textarea {    
      width: 100%;    
      height: 100%;    
      padding: 10px;    
      resize: none;    
    }    
    .act {    
      width: 100px;    
    }    
    button {    
      display: block;    
      margin: 20px auto;    
      height: 30px;    
      padding: 0 12px;    
      border: 1px solid;    
      line-height: 30px;    
      color: #fff;    
      background: #e55;    
      outline: none;    
      text-align: center;    
      border-radius: 3px;    
      cursor: pointer;    
      transition: all .2s ease;    
    }    
    button:hover {    
      background: #e44;    
    }    
    .inline-block {    
      display: inline-block;    
      vertical-align: top;    
    }    
  </style>    </head>    <body>    <div class="input inline-block">    <textarea id="input-text"></textarea>    </div>    <div class="act inline-block">    <button id="encode">编码</button>    <button id="decode">解码</button>    </div>    <div class="output inline-block">    <textarea id="output-text" disabled></textarea>    </div>    <script type="text/javascript">    
  /**    
  * 转换对照表    
  * U+00000000 – U+0000007F   0xxxxxxx    
  * U+00000080 – U+000007FF   110xxxxx 10xxxxxx    
  * U+00000800 – U+0000FFFF   1110xxxx 10xxxxxx 10xxxxxx    
  * U+00010000 – U+0010FFFF   11110xxx 10xxxxxx 10xxxxxx 10xxxxxx    
  **/    
  // '严'的Unicode编码为:0x4E25,它介于U+00000800 – U+0000FFFF之间,所以它占用三个字节。    
  window.base64 = {    
      keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",    
      // 字符串转UTF8编码    
      encode_utf8: function(str) {    
        var result = '',    
          length = str.length;    
        for (var i = 0; i < length; i++) {    
          var ucode,    
            byte1,    
            byte2,    
            byte3,    
            byte4,    
            u8code;    
          ucode = str.charCodeAt(i);    
          if (ucode <= 0x007F) {    
            u8code = String.fromCharCode(ucode);    
          } else if (ucode > 0x007F && ucode <= 0x07FF) {    
            byte2 = 0x80 | (ucode & 0x3F);    
            byte1 = 0xC0 | ((ucode >> 6) & 0x1F);    
            u8code = String.fromCharCode(byte1) + String.fromCharCode(byte2);    
          } else if (ucode > 0x07FF && ucode <= 0xFFFF) {    
            byte3 = 0x80 | (ucode & 0x3F);    
            byte2 = 0x80 | ((ucode >> 6) & 0x3F);    
            byte1 = 0xE0 | ((ucode >> 12) & 0x0F);    
            u8code = String.fromCharCode(byte1) + String.fromCharCode(byte2) + String.fromCharCode(byte3);    
          } else if (ucode > 0xFFFF && ucode <= 0x10FFFF) {    
            byte4 = 0x80 | (ucode & 0x3F);    
            byte3 = 0x80 | ((ucode >> 6) & 0x3F);    
            byte2 = 0x80 | ((ucode >> 12) & 0x3F);    
            byte1 = 0xF0 | ((ucode >> 18) & 0x07);    
            u8code = String.fromCharCode(byte1) + String.fromCharCode(byte2) + String.fromCharCode(byte3) + String.fromCharCode(byte4);    
          }    
          result += u8code;    
        }    
        return result;    
      },    
      // UTF-8编码转字符串    
      decode_utf8: function(str) {    
        var result = '',    
          length = str.length;    
        for (var i = 0; i < length; i++) {    
          var u8code_1 = str.charCodeAt(i),    
            ucode;    
          if (u8code_1 >> 7 == 0) {    
            // 单字节    
            ucode = u8code_1;    
          } else if (u8code_1 >> 5 == 0x6) {    
            // 双字节    
            var u8code_2 = str.charCodeAt(i+1);    
            byte1 = u8code_1 & 0x1F;    
            byte2 = u8code_2 & 0x3F;    
            ucode = byte1 << 6 | byte2    
            i += 1;    
          } else if (u8code_1 >> 4 == 0xE) {    
            // 三字节    
            var u8code_2 = str.charCodeAt(i+1);    
            var u8code_3 = str.charCodeAt(i+2);    
            byte1 = u8code_1 & 0x0F;    
            byte2 = u8code_2 & 0x3F;    
            byte3 = u8code_3 & 0x3F;    
            ucode = byte1 << 12 | byte2 << 6 | byte3;    
            i += 2;    
          } else if (u8code_1 >> 3 == 0xF0) {    
            var u8code_2 = str.charCodeAt(i+1);    
            var u8code_3 = str.charCodeAt(i+2);    
            var u8code_4 = str.charCodeAt(i+3);    
            byte1 = u8code_1 & 0x7;    
            byte2 = u8code_2 & 0x3F;    
            byte3 = u8code_3 & 0x3F;    
            byte4 = u8code_4 & 0x3F;    
            ucode = byte1 << 18 | byte2 << 12 | byte3 << 6 | byte4;    
            i += 3;    
          }    
          result += String.fromCharCode(ucode);    
        }    
        return result;    
      },    
      // base64编码    
      encode_bs64: function(str) {    
        if (!str) {    
          return;    
        }    
        // 先将字符串转换为UTF-8    
        var u8code = this.encode_utf8(str),    
          length = u8code.length,    
          i = 0,    
          result = '',    
          char1,    
          char2,    
          char3,    
          index1,    
          index2,    
          index3,    
          index4,    
          encode1,    
          encode2,    
          encode3,    
          encode4;    
        // 再将UTF-8进行base64编码    
        while (i < length) {    
          char1 = u8code.charCodeAt(i++);    
          char2 = u8code.charCodeAt(i++);    
          char3 = u8code.charCodeAt(i++);    
          index1 = char1 >> 2;    
          encode1 = this.keyStr.charAt(index1);    
          index2 = ((char1 & 0x3) << 4) | (char2 >> 4);    
          encode2 = this.keyStr.charAt(index2);    
          index3 = ((char2 & 0x0F) << 2) | (char3 >> 6);    
          encode3 = this.keyStr.charAt(index3);    
          index4 = char3 & 0x3F;    
          encode4 = this.keyStr.charAt(index4);    
          // 最后使用'='补足位数为3的倍数    
          if (isNaN(char2)) {    
            encode4 = encode3 = '=';    
          } else if (isNaN(char3)) {    
            encode4 = '=';    
          }    
          result += encode1 + encode2 + encode3 + encode4;    
        }    
        return result;    
      },    
      // base64解码    
      decode_bs64: function(str) {    
        if (!str) {    
          return;    
        }    
        // 先base64解码成UTF-8    
        var length = str.length,    
          i = 0,    
          u8code = '',    
          result = '',    
          char1,    
          char2,    
          char3,    
          encode1,    
          encode2,    
          encode3,    
          encode4;    
        str = str.replace(/[^A-Za-z0-9+/=]/g, "");    
        while (i < length) {    
          decode1 = this.keyStr.indexOf(str.charAt(i++));    
          decode2 = this.keyStr.indexOf(str.charAt(i++));    
          decode3 = this.keyStr.indexOf(str.charAt(i++));    
          decode4 = this.keyStr.indexOf(str.charAt(i++));    
          char1 = (decode1 << 2) | (decode2 >> 4);    
          char2 = ((decode2 & 0xF) << 4) | (decode3 >> 2);    
          char3 = ((decode3 & 0x3) << 6) | decode4;    
          u8code += String.fromCharCode(char1);    
          if (decode3 != -1) {    
            u8code += String.fromCharCode(char2);    
          }    
          if (decode4 != -1) {    
             u8code += String.fromCharCode(char3);    
          }    
        }    
        // 再将UTF-8转换成字符串    
        result = this.decode_utf8(u8code);    
        return result;    
      }    
    };    
  var btn_en = document.getElementById("encode"),    
    btn_de = document.getElementById("decode"),    
    input_text = document.getElementById('input-text'),    
    output_text = document.getElementById('output-text'),    
    b64,    
    d64;    
  btn_en.onclick = function() {    
    b64 = base64.encode_bs64(input_text.value);    
    output_text.value = b64;    
  }    
  btn_de.onclick = function() {    
    d64 = base64.decode_bs64(input_text.value);    
    output_text.value = d64;    
  }    
  </script>    </body>    </html>


本文地址:http://chenyajun.net/index.php/post/92.html
版权声明:本文为原创文章,版权归 chenyajun 所有,欢迎分享本文,转载请保留出处!

评论已关闭!