JavaScriptのfetch API&DOM Parserで外部HTMLを解析する

JavaScriptのfetchとは

fetch APIはJavaScript標準搭載されているAPIで、Internet Explorerを除けばほとんどのモダンブラウザで利用できるのがメリットです。

Fetch API | MDN

SPAなどで外部APIからデータを取得する際は、axiosなどのライブラリが人気ですが、アプリサイズを小さくしたいのであれば、fetchを使うのも手です。

fetch APIでHTMLデータを読んで、解析する

fetch APIは、jsonレスポンスを読む前提（response.json()的な）で解説されることが多いですが、実はHTMLなどのテキストデータも処理できます。

fetch APIで処理できるデータは下記の通りです。

• Body.arrayBuffer()
• Body.blob()
• Body.formData()
• Body.json()
• Body.text()

HTMLなどページデータを読むときは、text()メソッドが使えます。

実装してみる

前置きはこれくらいにして、実装してみます。

完成品はこんな感じ。

const result = await fetch('取得したいURL', {
  method: "GET"
}).then(function(response) {
  return response.text();
}).then(function(data) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(data, "text/html");
  const message = doc.getElementById("message").innerHTML
  return message;
});

流れ的には、

1. fetch APIでデータを取得
2. 取得したデータからtext()を取る
3. テキストデータを、ブラウザ標準APIである「DOM Parser」で解析
4. 取得したい要素をHTMLから取得して返却

という感じです。

注意点

fetchは、CORS(オリジン間リソース共有)許可がないとデータをプログラムに返却してくれません。

自前のサイトであればHTTPのレスポンスヘッダに入れればいいので、CORS対策が簡単にできますが、外部サイトのデータを取得する際は、相手サーバーがCORSを

ブラウザ標準機能だけで、外部サイトのHTMLから好みのデータを取得する方法をみてきましいた。意外とサクッとできましたね。

SPAなどで外部サイトのデータを取得して使う際は、CORSの問題があるので使い勝手はあまりよくありませんが、CORSの問題をクリアできるなら、無駄なプラグインも入らないので軽量で非常に便利です。