web-dev-qa-db-ja.com

JavaScriptを使用してBase64を16進文字列にデコードする

JavaScriptでBase64文字列を16進数に変換する必要があります。

例：

var base64Value = "oAAABTUAAg=="

変換方法が必要

出力（デコードされたデータ（16進数））A0000005350002

私はこのウェブサイトを使用できるのでこれが正しいことを知っています http://tomeko.net/online_tools/base64.php?lang=en

oAAABTUAAg==のBase64文字列をパンチして、A0000005350002を取得します

何を試しましたか？

https://github.com/carlo/jquery-base64
https://jsfiddle.net/gabrieleromanato/qaght/

たくさんの質問を見つけました

javascriptjqueryhexbase64
15
user6736489

atob（）の場合、charCodeAt（）はバイナリを提供し、toString（16）は16進数を提供します。

function base64toHEX(base64) {

  var raw = atob(base64);

  var HEX = '';

  for ( i = 0; i < raw.length; i++ ) {

    var _hex = raw.charCodeAt(i).toString(16)

    HEX += (_hex.length==2?_hex:'0'+_hex);

  }
  return HEX.toUpperCase();

}

console.log(base64toHEX("oAAABTUAAg=="));
13
user3094755

16進数表現を文字列にしたい場合、 window.atob function （ほとんどの最新のブラウザで使用可能）が最初のステップです。base64文字列をASCII文字列に変換します。各文字は1バイトを表します）。

この時点で、文字列を分割し、各文字の文字コードを取得して、thatを左詰めの16進文字列に変換します。

function base64ToBase16(base64) {
  return window.atob(base64)
      .split('')
      .map(function (aChar) {
        return ('0' + aChar.charCodeAt(0).toString(16)).slice(-2);
      })
     .join('')
     .toUpperCase(); // Per your example output
}

console.log(base64ToBase16("oAAABTUAAg==")); // "A0000005350002"

（またはJSBinで試す）

5
Brad Buchanan

次のコードを試してみませんか？：

const buffer = Buffer.from(rawData, 'base64');
const bufString = buffer.toString('hex');
4
user11429314

これがatobとBufferを使用しないバニラJavaScriptソリューションです。バイナリデータに適したセパレータをサポートし、Reactネイティブ、比較的高いパフォーマンス。

使用法 ：

base64ToHex( 'MTIzYWJjIDotKQ==', '-' )
// returns '31-32-33-61-62-63-20-3a-2d-29'

コード：

/* Convert base64 data to hex string.  https://stackoverflow.com/a/57909068/893578
 *   txt : Base64 string.
 *   sep : Hex separator, e.g. '-' for '1a-2b-3c'.  Default empty.
 */
const base64ToHex = ( () => {
   // Lookup tables
   const values = [], output = [];

   // Main converter
   return function base64ToHex ( txt, sep = '' ) {
      if ( output.length <= 0 ) populateLookups();
      const result = [];
      let v1, v2, v3, v4;
      for ( let i = 0, len = txt.length ; i < len ; i += 4 ) {
         // Map four chars to values.
         v1 = values[ txt.charCodeAt( i   ) ];
         v2 = values[ txt.charCodeAt( i+1 ) ];
         v3 = values[ txt.charCodeAt( i+2 ) ];
         v4 = values[ txt.charCodeAt( i+3 ) ];
         // Split and merge bits, then map and Push to output.
         result.Push(
            output[ ( v1 << 2) | (v2 >> 4) ],
            output[ ((v2 & 15) << 4) | (v3 >> 2) ],
            output[ ((v3 &  3) << 6) |  v4 ]
         );
      }
      // Trim result if the last values are '='.
      if ( v4 === 64 ) result.splice( v3 === 64 ? -2 : -1 );
      return result.join( sep );
   };

   function populateLookups () {
      const keys = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
      for ( let i = 0 ; i < 256 ; i++ ) {
         output.Push( ( '0' + i.toString( 16 ) ).slice( -2 ) );
         values.Push( 0 );
      }
      for ( let i = 0 ; i <  65 ; i++ )
         values[ keys.charCodeAt( i ) ] = i;
   }
} )();

デモ：

const [ txt, b64, hex, sep ] = document.querySelectorAll( 'input, select' );

function txtOnInput ({ target: { value }}) {
   hex.value = base64ToHex( b64.value = btoa( value ), sep.value ).toUpperCase();
}

function b64OnInput ({ target: { value }}) {
   hex.value = base64ToHex( value, sep.value ).toUpperCase();
   txt.value = atob( value );
}

txtOnInput({target:txt});

// Different coding style, same result.
function base64ToHex ( txt, sep = '' ) {
   let { val, out } = base64ToHex, v1, v2, v3, v4, result = [];
   if ( ! base64ToHex.val ) { // Populate lookup tables.
      out = base64ToHex.out = [];
      val = base64ToHex.val = Array( 255 ).fill( 0 );
      const keys = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
      for ( let i = 0 ; i < 256 ; i++ ) out.Push( ( '0' + i.toString(16) ).slice( -2 ) );
      for ( let i = 0 ; i <  65 ; i++ ) val[ keys.charCodeAt( i ) ] = i;
   }
   for ( let i = 0, len = txt.length ; i < len ; i += 4 ) {
      v1 = val[ txt.charCodeAt( i   ) ]; // Map four chars to values.
      v2 = val[ txt.charCodeAt( i+1 ) ];
      v3 = val[ txt.charCodeAt( i+2 ) ];
      v4 = val[ txt.charCodeAt( i+3 ) ];
      result.Push( out[ (v1 << 2) | (v2 >> 4) ], // Split values, map to output.
                   out[ ((v2 & 15) << 4) | (v3 >> 2) ],
                   out[ ((v3 & 3) << 6) | v4 ] );
   } // After loop ended: Trim result if the last values are '='.
   if ( v4 === 64 ) result.splice( v3 === 64 ? -2 : -1 );
   return result.join( sep ); // Array is fast.  String append = lots of copying.
}
label { display: block; height: 1em; }
input, select { position: absolute; left: 5em; width: calc( 100% - 6em ) }
input[readonly] { background: #D8D8D8; }
<label>Ascii <input oninput='txtOnInput(event)' value='123abc :-)'></label><br>
<label>Base64 <input oninput='b64OnInput(event)'></label><br>
<label>Hex    <input readonly></label><br>
<label> <select onchange='txtOnInput({target:txt})'>
<option value=''>(None)<option value=' ' selected>(Space)<option value='-'>-</select></label><br>

注：これは geisterfurz007 に対して行われます。これは、 react-native-fs がバイナリファイルのbase64を生成し、（s）彼がそれを16進文字列に変換する必要があるためです。既存のスニペットの効率に満足しているわけではありません...

1
Sheepy

試す

[...atob(base64Value)].map(c=> c.charCodeAt(0).toString(16).padStart(2,0))

let base64Value = "oAAABTUAAg=="

let h= [...atob(base64Value)].map(c=> c.charCodeAt(0).toString(16).padStart(2,0))

console.log( h.join``.toUpperCase() );
0
Kamil Kiełczewski