Node.js製HTMLパーサ「cheerio」の出力結果からhtmlやbodyタグを除く

公開:2020/12/14
更新:2020/12/19
1 min読了の目安(約1100字TECH技術記事

Node.jsのHTMLパーサcheerioを使うと、特定のHTML(DOM)だけを直感的に書き換えることができます。

import cheerio from 'cheerio';

// 読み込む
const $ = cheerio.load('<h1 class="heading">Foo</h1>');

// DOMを好きなように操作
$('.heading').text('Bar');
$('.heading').addClass('red');

// 変換後のHTMLを取得
const result = $.html();
console.log(result);
// <html><head></head><body><h1 class="heading red">Bar</h1></body></html>

問題は出力結果に<html><head><body>が自動的に付与されてしまうということです。一部のみを書き換えたいときにはこれでは困ります。

該当するissueには解決策が載っていないのですが、Gatsbyのソースコードを見てみると以下のような形で対応されていました。

$(`body`).html() // fix for cheerio v1

というわけで最初のサンプルで<html><body>が付与されないように書き直すと次のようになります。

import cheerio from 'cheerio';

const $ = cheerio.load('<h1 class="heading">Foo</h1>');

$('.heading').text('Bar');
$('.heading').addClass('red');

const result = $('body').html();
console.log(result);
// <h1 class="heading red">Bar</h1>

普通にそういう書き方をすれば良いのね、という感じですね。