【FileAPI, readAsText】JavaScriptで文字コードを判別して文字化けを倒す
HTML5で追加されたFileAPIで、ローカルファイルをJavaScriptで扱えるようになりました。ファイルの中身をテキストと見なして読み込むreadAsTextメソッドでは、第二引数で文字コードを指定できますが、そもそも文字コードが分からなかったり自動判別したいときの対処法です。
結論としては、readAsArrayBufferでバイナリのまま読み込んでライブラリにデコードしてもらいます。
今回 encoding.js を使いました。
数値配列をもとに、文字コードの判別や変換をしてくれるマッチョなライブラリです。
var file = // 文字コードの分からないテキストファイル var reader = new FileReader(); reader.onload = function (e) { // 8ビット符号なし整数値配列と見なす var array = new Uint8Array(e.target.result); // 文字コードを取得 switch (Encoding.detect(array)) { case 'UTF16': // 16ビット符号なし整数値配列と見なす array = new Uint16Array(e.target.result); break; case 'UTF32': // 32ビット符号なし整数値配列と見なす array = new Uint32Array(e.target.result); break; } // Unicodeの数値配列に変換 var unicodeArray = Encoding.convert(array, 'UNICODE'); // Unicodeの数値配列を文字列に変換 var text = Encoding.codeToString(unicodeArray); console.log(text); // 結果 } reader.readAsArrayBuffer(file);
コーディングチャットができるwebアプリ「ko-cha」で、ドラッグ&ドロップされたファイルを文字化けせずに読み込めるようになりました。
http://setchi.jp/ko-cha2/