作成日:2024-03-08
cheerioを使うことでwebページの必要な情報を取得することができます
cheerioを使って、特定のクラス、タグ、idのテキストを取得する。
cheerioはhtmlのデーターに対しパーサー等用意されており、jqueryのような操作ができるものです。
htmlのデーターはcheerioでは取得できないので、fetch等で取得する必要があります。
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タグに書かれているすべてのテキストを取得します。
let ptag = $('p').text();// <-pタグの全てのテキストを出力
console.log(ptag);
const classtextis = $('.div1class');//<--クラスのすべて
console.log(classtextis.text())
こんな感じで使うことができます。
let filterclass = $('.css-d8erc9');//.css-d8erc9のクラスが入ってる全てを取得。
let filterc = $('li',filterclass);//その中のliタグを取得。
console.log(filterc.text())//liタグのテキストを取得。
使い方がなんとなく分かったので必要なデータのみを取得していきます。
1.htmlに書かれているすべてのクラスを取得します。
2.eachでelemntsの全てのクラスを分割し配列に追加します。
const classNames = [];
const elementsWithClass = $('[class]');//classがついているものを全て取得
elementsWithClass.each((_, element) => {
const classes = $(element).attr('class').split(' ');//複数クラスあった場合スペースが入っているため、スベース' 'で分割。
classNames.push(...classes);
})
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を使うことで必要な情報のみを抽出できます。情報は配列で返ってくれたらありがたいよね?
質問や、間違いがありましたら、お気軽にどうぞ
※お名前とコメントの内容を入力してください。
※全てこのブログ上に公表されます。
※許可なく管理者によって修正・削除する場合がございます。 詳しくはプライバシーポリシーを参照ください