NodeJSでXPathを利用したい

Question

前提

WebページにRSSが無いので、Webページをスクレイピングして新着ニュースをメールで送信しようと考えています。
ニュース部分をHTMLから切り出す為にNode.jsでXPathを利用してプログラムを作っています。

実現したいこと

NodeJSでXPathを利用したい。

発生している問題・エラーメッセージ

「n個の要素が見つかりました」（nは0以上）と表示される事を期待しているが、「0個の要素が見つかりました」と表示されてしまう。

該当のソースコード

const fetch = require('node-fetch')
const xpath = require('xpath')
const parse5 = require('parse5')
const xmlser = require('xmlserializer')
const DOMParserDom = require('xmldom').DOMParser;

(async () => {
  const url = 'https://gundamevolution.jp/news/'
  const res = await fetch(url)
  const text = await res.text()

  const document = parse5.parse(text)
  const xhtml = xmlser.serializeToString(document)
  const doc = new DOMParserDom().parseFromString(xhtml)
  const select = xpath.useNamespaces({ 'x': 'https://www.w3.org/1999/xhtml' })
  const items = select('//x:a[contains(@class, "news-list__item")]', doc)
  console.log(`${items.length}個の要素が見つかりました`)

  // 実行結果
  // 0個の要素が見つかりました
})()

試したこと

• fetchで取得したHTMLに問題がないかを確認したが、ニュースのタイトルなどがout.htmlで確認出来たので問題ないと判断した。

+ const fs = require('fs');
+ fs.writeFileSync('out.html', text)

• 簡単なXPathに置き換えてXPathの動作確認をしたが、「0個の要素が見つかりました」が表示された。

- const items = select('//x:a[contains(@class, "news-list__item")]', doc)
+ const items = select('//x:a', doc)

• 別のWebサイトでXPathの動作確認をしたが、「0個の要素が見つかりました」が表示された。

- const url = 'https://gundamevolution.jp/news/'
+ const url = 'http://example.com'

- const items = select('//x:a[contains(@class, "news-list__item")]', doc)
+ const items = select('//x:a', doc)

補足情報（FW/ツールのバージョンなど）

• Windows 11 21H2

$ node --version
v16.14.2

"dependencies": {
  "node-fetch": "^2.6.0",
  "parse5": "^7.1.1",
  "xmldom": "^0.6.0",
  "xmlserializer": "^0.6.1",
  "xpath": "^0.0.32"
}

参考

https://qiita.com/ledsun/items/0965a60f9bdff04f2fa0#xpath-parse5

Comments

[int32_t]

変数 xhtml の内容はどうなっていますか。

[m.ts10806]

>WebページにRSSが無い
自身が管理しているWebページでしょうか？
ニュースのもとはどこにある情報でしょうか？（データベースか、APIか、その他）

[minato2000]

int32_tさん、長くなるのでpastebinにアップロードしました。
クラス名「news-list__item」の要素内にニュースタイトルが含まれているので問題ないHTMLが取得できている状態だと思います。
https://pastebin.com/jgqT1PSY

Answer 1

jsdomを利用する事で解決しました。
xpathは2年以上更新されておらず、利用しないほうが良いと判断しました。

今回のケースではXPathではなく、セレクターだけで書くと簡潔になりました。

XPathを利用した例

const fetch = require('node-fetch')
const { JSDOM } = require('jsdom');

(async () => {
  const url = 'https://gundamevolution.jp/news/'

  const res = await fetch(url)
  const text = await res.text()

  const dom = new JSDOM(text)
  const items = dom.window.document.evaluate('//a[contains(@class, "news-list__item")]', dom.window.document, null, dom.window.XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null)
  console.log(`${items.snapshotLength}個の要素が見つかりました`)

  for (let i = 0; i < items.snapshotLength; i++) {
    const item = items.snapshotItem(i)
    const titleElement = item.querySelector('.news-list__title')
    console.log(titleElement.textContent.trim())
  }
})()

// 出力
// 13個の要素が見つかりました
// EVOコインの販売開始日時について
// 第11回 GUNDAM EVOLUTION開発ブログ
// クライアントダウンロードのお知らせ
// ... 
// 以下省略

セレクターのみ（XPathを利用しない）

const fetch = require('node-fetch')
const { JSDOM } = require('jsdom');

(async () => {
  const url = 'https://gundamevolution.jp/news/'

  const res = await fetch(url)
  const text = await res.text()

  const dom = new JSDOM(text)
  const items = dom.window.document.querySelectorAll('.news-list__item')
  console.log(`${items.length}個の要素が見つかりました`)

  for (const item of items) {
    const titleElement = item.querySelector('.news-list__title')
    console.log(titleElement.textContent.trim())
  }
})()

// 出力
// 13個の要素が見つかりました
// EVOコインの販売開始日時について
// 第11回 GUNDAM EVOLUTION開発ブログ
// クライアントダウンロードのお知らせ
// ... 
// 以下省略