【Node.js】Cheerioで記号の入ったタグを指定する際、”SyntaxError: unmatched pseudo-class”が出た時の対処

結論だけ先に言うと、バックスラッシュ2個でエスケープすればok。1個じゃなくて2個ね。

1 Node.jsでHTML/XMLを扱うならとりあえずcheerio使っとくと楽
2 タグ名に記号が入ってたら、エスケープしなきゃなんだけど…
3 解決策：バックスラッシュ2個でエスケープすればおk
4 感想とか
5 参考にしたサイト

Node.jsでHTML/XMLを扱うならとりあえずcheerio使っとくと楽

Node.jsでHTML/XMLを扱うなら、モジュール”Cheerio”を使うと、タグ名で指定した要素を簡単に取り出すことができてとっても便利です。

例えば、こういうxmlがあったとして

<?xml version="1.0"?>
<Product>
  <ns:Title>MacBook Pro 2017ver.</ns2:Title>
  <Price>
    <JPY>150,000</JPY>
    <US$>140</US$>
  </Price>
  <SalesRank>1</SalesRank>
</Product>

<?xml version="1.0"?>

<ns:Title>MacBook Pro 2017ver.</ns2:Title>

<Price>

<US$>140</US$>

</Price>

</Product>

シェルからnodeを起動し、cheerioモジュールを使っていろいろイジってみます。

まずは以下のようにcheerio.load()メソッドを使って対象のxmlを定数$にロードしてやると…

const cheerio = require(‘cheerio’);
const xml = <上記のxml>
const $ = cheerio.load(xml);

$(‘セレクタ名’)って感じで、jQueryライクにセレクタで要素を指定してデータを取り出すことができる。

例えば、上記のxmlからSalesRankノードのテキストを取り出すなら、

> $(‘Product SalesRank’).text();
‘1’

こんな感じで書いてやれば、ノード内のテキストである”1″が返る。

タグ名に記号が入ってたら、エスケープしなきゃなんだけど…

ただ、タグ名に”$”とか”:”みたいな文字が入っていた場合、そのまま指定するとエラーになってしまう。

例えば、上のxmlでns:Titleノードを指定しようとした場合、以下のようにセレクタにノード名をそのまま書くとNG。

$('Product ns:Title').text();
SyntaxError: unmatched pseudo-class :title

:titleだと？そんな疑似クラスねえよ！的なエラーが出て叱られる。

はじめにこのエラーを見たときは、「ほーん。ほなバックスラッシュ一発でエスケープすりゃええんやろ」くらいのことを考えていたのだが

$('Product ns\:Title').text();
SyntaxError: unmatched pseudo-class :title

だから！:titleなんてねえんだよ！的なエラーが再び。

あれ？エスケープ効かないの？？とちょっと混乱したのでググってみた。

解決策：バックスラッシュ2個でエスケープすればおk

すると、フツーに公式のGIthubにissueが上がってた。

SyntaxError: unmatched pseudo-class :foo
Q: Trying to use cheerio to match against a custom HTML node receives that error.
A: double backslash fixed it. I originally tried one but not two, smh.

（クソ雑な翻訳）
Q：HTMLでCheerio使ってノードを取り出そうとしたら、こんなエラー出たんだけど
A：それ俺もやったわ。バックスラッシュ2個でエスケープすれば直るよ。1個じゃなくて2個な。やれやれ。

バックスラッシュ2個なのかよ！

というわけで、言われたとーりバックスラッシュ2個にしてみる。

> $(‘Product ns\\:Title’).text();
‘MacBook Pro 2017ver. 150,000 140 1’

できた。

他の文字でも同様に、バックスラッシュ2発でエスケープ。

> $(‘Product Price US\\$’).text();
‘140’