Hero img
[cheerio]nodejsでウェブスクレイピング

nodejsのスクレイピングライブラリのcheerioを使って情報を抽出する

cheerioを使うことでwebページの必要な情報を取得することができます


目次

  • 目標
  • cheerioとは
  • install
  • 使てみる
  • 読み込み
  • pタグのテキストを取得。
  • 特定のクラス内のテキストを読み込む。
  • 特定のクラス内のliタグのテキストを取得
  • 本番
  • クラスを全て取得
  • テキストを全て取得
  • まとめ

目標

cheerioを使って、特定のクラス、タグ、idのテキストを取得する。

cheerioとは

cheerioはhtmlのデーターに対しパーサー等用意されており、jqueryのような操作ができるものです。
htmlのデーターはcheerioでは取得できないので、fetch等で取得する必要があります。

install

npm install cheerio

使てみる

cheerioを使うにはhtmlファイルを用意する必要があります。今回はhtmlをfetchで読み込みそのデータを使います。

読み込み

fetchでhtmlを取得し、htmlのデーターをcheerioに読み込ませます。

import cheerio from 'cheerio'
let result  = await fetch("https://yumeno.me").then(data => data.text());
const $ = cheerio.load(result);

この$はjqeuaryライクなのでこのように$になっていますが、深い意味ルールはありません。

pタグのテキストを取得。

次にpタグに書かれているすべてのテキストを取得します。

let ptag = $('p').text();//  <-pタグの全てのテキストを出力
console.log(ptag);

特定のクラス内のテキストを読み込む。

const classtextis = $('.div1class');//<--クラスのすべて
console.log(classtextis.text())

こんな感じで使うことができます。

特定のクラス内のliタグのテキストを取得

let filterclass = $('.css-d8erc9');//.css-d8erc9のクラスが入ってる全てを取得。
let filterc = $('li',filterclass);//その中のliタグを取得。
console.log(filterc.text())//liタグのテキストを取得。

本番

使い方がなんとなく分かったので必要なデータのみを取得していきます。

クラスを全て取得

  1. 1.htmlに書かれているすべてのクラスを取得します。

  2. 2.eachでelemntsの全てのクラスを分割し配列に追加します。

全てのクラスをclassNamesに入れる。
   const classNames = [];
   const elementsWithClass = $('[class]');//classがついているものを全て取得
   elementsWithClass.each((_, element) => {
      const classes = $(element).attr('class').split(' ');//複数クラスあった場合スペースが入っているため、スベース' 'で分割。
      classNames.push(...classes);
   })
  1. 3.重複のクラスがあるので削除します。
   let uniqueClassNames = new Set(classNames);//重複削除
   console.log(uniqueClassNames);
出力例
Set(18) {
  'css-1i436mg',
  'css-eavv2u',
  'css-1ddsj48',
  'css-12p1pod',
  'css-am9xfd',
  'css-qoas51',
  'css-1xe2xba',
  'flex',
  'items-center',
  'css-1knwbmp',
  'css-1vorqa7',
  'css-9dpnz1',
  'css-ftskrm',
  'css-9hgf2e',
  '__cf_email__',
  'css-1b533co',
  'css-15bvcwb',
  'css-1tbq54w'
}

テキストを全て取得

pタグのすべてのテキストを取得し配列に変換する。

   let newptag = $('p');//pタグを全て取得

   let ptagarray =  newptag.map((index , element)=>{
      return $(element).text();//ptagのテキストを全て取得。
   }).get();//getでtext配列だけを取得。
出力例
[
  '2024-03-07', '2024-02-29', '2024-02-27',  '2024-02-22', '2024-02-20',
  '2024-02-20', '2024-02-16', '2024-02-15',  '2024-02-05', '2024-02-01',
  '2024-02-01', '2024-01-31', '2024-01-29',  '2024-01-18', '2023-12-26',
  '2023-12-21', '2023-12-20', '2023-12-18',  '2023-12-11', '2023-12-11',
  '2023-12-08', '2023-12-08', '2023-12-06',  '2023-11-22', '2023-11-01',
  '2023-10-31', '2023-10-26', '2023-10-12',  '2023-09-20', '2023-09-07',
  '2023-08-29', '2023-08-08', '2023-07-25',  '2023-07-06', '2023-07-06',
  '2023-06-16', '2023-05-31', '2023-05-30',  '2023-05-30', '2023-05-29',
  '2023-04-19', '2023-04-18', '2023-04-11',  '2023-03-20', '2023-02-28',
  '2023-02-21', '2023-02-07', '2023-02-07',  '2023-02-07', '2023-02-06',
  '2023-02-01', '2023-01-27', '2023-01-24',  '2023-01-20', '2023-01-17',
]

まとめ

cheerioを使うことで必要な情報のみを抽出できます。情報は配列で返ってくれたらありがたいよね?

関連記事

コメント

コメントを書く

質問や、間違いがありましたら、お気軽にどうぞ

※お名前とコメントの内容を入力してください。
※全てこのブログ上に公表されます。
※許可なく管理者によって修正・削除する場合がございます。 詳しくはプライバシーポリシーを参照ください