JavaScript
fetch

Fetch API で Shift_JIS の HTML をDOM として読み込む

fetch で Shift_JIS を扱おうとしたら文字化けしたので解決方法をメモ。


1. 結論

const parseBlob = blob => {

return new Promise(resolve => {
const reader = new FileReader();
reader.onload = () => { resolve(reader.result) };
reader.readAsText(blob, 'shift-jis');
});
};

const parseHTML = text => {

const dom = new DOMParser().parseFromString(text, 'text/html');

// 処理
console.log(dom.head);

};

//
const url = '...';

fetch(url)
.then(res => res.blob())
.then(parseBlob)
.then(parseHTML);


2. 流れ



  1. fetch で DOM として直接読み込むことはできない

  2. なので、一回 text として読み込んで DOM に parse する

  3. ところが、res.text() で文字コードが UTF-8 以外で文字化けし、解決方法は (おそらく) ない (Content-Typecharset を指定しても効果なし)

  4. なので、一度 Blob として読み込み、文字コードを指定して文字列に変換し、そこから DOM に parse する

参考「JavaScriptのFetch APIで返ってきたものをDOMとして扱う - ひと夏の技術

参考「fetch APIでUTF8以外のエンコーディングだと辛い – 阿Qさんと一緒