[Node.js]cherrio-httpcliが文字化けする

Question

Webクローラーを作ろうと思ってcherrio-httpcliを使ってみたのですが、文字化けをして詰まりました。。。

環境：Mac OS X El Capitan
Node v5.7.0

package.json

{
  "name": "node-crowler",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "buffer": "^4.5.0",
    "cheerio-httpcli": "^0.6.5",
    "gulp": "^3.9.1",
    "gulp-typescript": "^2.12.1",
    "iconv": "^2.1.11",
    "request": "^2.69.0",
    "tsd": "^0.6.5"
  }
}

getpage.js

var client = require('cheerio-httpcli');

//yahooのトップページを取得する
var url = "http://www.yahoo.co.jp";

client.fetch(url, function (err, $, res) {
    var body = $.html();
    console.log(body);
});

以下のコマンドにより実行

$ node src/getpage.js > result

resultを見ると、日本語の部分が

<h2>&#x30E4;&#x30D5;&#x30FC;&#x304B;&#x3089;&#x306E;&#x304A;&#x77E5;&#x3089;&#x305B;</h2>

のように文字化けしている。

調べてみたところ、特に設定をしなくてもライブラリ側でよろしく文字コードを処理してくれるのがcherrio-httpcliらしいですが、私のPCではきっちり文字化けしてしまっています。。。

cherrio-httpcli#fetchの第二引数に"sjis"や"utf8"を指定しても解決しませんでした。
手詰まりになったので質問させていただきます。よろしくお願いしますm(__)m

Answer 1

文字化けではなく、数値文字参照として変換されてるようです
文字参照 - Wikipedia

JavaScript で日本語に戻すには、要素の innerHTML に入れて、 textContent を取得すればできると思いますが、Node.js ではこの方法は使えなそうです

npm を調べてみるとこのライブラリで変換できそうです
https://www.npmjs.com/package/he

cherrio-httpcli 自身に日本語で取得機能があるかはわからないですが、ぐぐってみると数値参照になることに愚痴を言ってる人をみかけたのでもしかすると、日本語のまま取得することはできないのかもです

Comments

[yohira0616]

ありがとうございます。
he#encodeをかませると数値参照を日本語に切り替えることができました。
$({cssセレクタ})で要素を絞り込んで、出力するときにその要素に対してhe#encodeをかませれば任意の要素を日本語で取れそうですね。

Answer 2

この現象は、cheerio.load()実行時に渡せる引数 option の decodeEntity を false にしてやることで変換を無効化して出力できるのですが…

どうも cheerio-httpcli は外側から cheerio.load() に対して option を渡せないようですね。

行われている事は平文をHTMLEntity文字列へ変換しているだけなので、出力結果に対してdecode処理をかけてやれば復元は可能だと思います。

html-entitiesのようなデコードできるライブラリを使ってみてはどうでしょうか。

Comments

[yohira0616]

ありがとうございます。cherrioのほうも触ってみます。

Answer 3

0.3.0以降だとcallbackの第4引数から元のbodyが取れるようになっているようです。

以下引用

jQueryっぽいオブジェクトじゃなくて素のhtmlが欲しいんだけど

$.html()で取得できます。
追記：$.html()はcheerioがパースしたDOMを再構築したもののようなので、厳密には元のHTMLとは異なります。バージョン0.3.0からfetch()のコールバック関数の第4引数に元のHTML(UTF-8に変換済み)をセッ>トするようにしました。

以下のような感じでとれるようになります。

var client = require('cheerio-httpcli');

//yahooのトップページを取得する
var url = "http://www.yahoo.co.jp";

client.fetch(url, function (err, $, res, body) {
    console.log(body);
});

参考資料

Node.js用のスクレイピングモジュール「cheerio-httpcli」の紹介

Comments

[yohira0616]

ありがとうございます。
第4引数の値をconsole.logで取ってみましたが、body要素が表示できました。