読者です 読者をやめる 読者になる 読者になる

setchi’s blog

コードに埋もれてます。

【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/