はじめに
色々調査をしている時に、HTMLから任意の要素を切り抜く必要があったので、やり方をメモ。
前提条件
- Mac OSX
- Chrome最新版
でのみ試しています。Windows, Linuxでもxmllintが入っていれば動くかと思います。
手順
XPathの取得
- ブラウザ上で切り抜きたい要素を右クリック、「検証」を選択
- DevToolが表示されたら、そのElementsタブ内部で、要素を選択、右クリックで
Copy > Copy full XPathを選択。切り取れたXPathは
/html/body/div/main/div[6]/div/table/tbody/tr[5]/td[2]
だったとする。このXPathをどこかにメモする。
ブラウザのDevToolで動作を検証
ブラウザのコンソールから、以下のような形でXPathの動作検証ができる。
- Chrome で対象のサイトを開く
- デベロッパーツールからコンソールを開く
$x('/html/body/div/main/div[6]/div/table/tbody/tr/td[2]')
のような感じに設定して、配列でtrを繰り返しパースして、td部のデータが取得できるか、などを確認する。
ページの保存
DevToolからだとオブジェクトは取れるのだが、該当の文字列が取得できない。絞り込まれたオブジェクトを指定してコピー、テキストエディタなどに貼り付けても、空のオブジェクト配列しかとれなかった。
調べたところ、Mac OSXに標準で入っているxmllintを利用して文字列が取得できることがわかったので、以下のように対象HTMLをローカルにコピーして処理することにした。
- その要素が表示されているページで右クリック、
ページのソースを表示 - Cmd + Sで保存ダイアログを表示、
ウェブページ、HTMLのみで保存。今回は、例えばtest.htmlとして保存する。
xmllintコマンドの実行
次に、コマンドプロンプトを開き、test.htmlを保存したディレクトリに移動。XPathを以下のように変更
- 今回は、テーブルの全部
trの2番目(td[2])の要素のテキストを抜き出したかったので、保存していたXpathを以下のように変更してパースする。 -
test()は、前の要素のテキストを抜き出すための関数になる。
変更したXPathを指定したxmllint
xmllint --html -xpath "/html/body/div/main/div[6]/div/table/tbody/tr/td[2]/text()" test.html
これを実行すると、テーブルの任意の部分のテキストが切り取れる。