Cheerioで取得した要素の重複を削除する方法をご紹介します。
結論からいうとCheerioで取得したデータはオブジェクトでありそのままでは重複を削除できません。しかしちょっとした処理を行うことでCheerioオブジェクトの重複を削除できます。
Cheerioオブジェクトの重複は削除できない
JavaScriptで配列データの重複を削除する一般的な方法は Set() を使うことですがCheerioのオブジェクトに対して Set() を使っても重複は削除できません。以下は間違った例です。
let $elements = $('.text');
let uniqueElements = [...new Set(elements)];こちらはエラーこそ発生しないものの例えば$(‘.text’)要素内のテキストに重複があったとしても削除されません。
Cheerioで取得した要素の重複を削除するにはどうしたらいいのか
Cheerioで取得した要素の重複を削除するにはどのようにしたらいいのかというと次のような流れになります。(実際にはCheerioで取得した要素内のテキストに重複があれば排除したいはずですのでその前提ですすめていきます)
- 新たに.text()メソッドを使ってテキストの配列をつくります
- 新に作成した配列に対して Set() を使い重複を削除します。
- 重複を削除したあとまたCheerioのオブジェクトに戻す
上記の流れを汲んだコードは以下になります。
//Cheerioのオブジェクト
let $elements = $('.text');
console.log($elements.length)
//新にテキストの配列を作る
const elementsTexts = [];
$elements.each((index, element) => {
const text = $(element).text();
elementsTexts.push(text);
});
const uniqueElementsTexts = [...new Set(elementsTexts)];
//Cheerioのオブジェクトに戻す
const $uniqueElements = uniqueElementsTexts.map(text => $(`<div class="text">${text}</div>`));
console.log($uniqueElements.length) //重複があった場合は削除されているので要素の数も減っているテキスト配列を作成して重複を削除するので、重複があれば削除されます。そのあとに再度オブジェクトに戻しているのでこれでCheerioで取得した要素の重複を削除できたことになりますね。
ちなみにですが通常の流れですとオブジェクトからテキストやそのほかの属性の値などを抽出すると思いますので、テキストを取得したあとにわざわざオブジェクトに戻す必要はありません。わたしの場合はプロジェクトでコードがすでに完成していて、そのままテキストを処理しようとすると大幅な修正が必要になるためオブジェクトに戻す方法を選択しました。
まとめ
Cheerioで取得した要素の重複を削除する場合はオブジェクトに対して Set() を使っても重複は削除できないので一旦配列にしてその配列に対して Set() を使って重複を削除するようにします。一般的にはCheerioのオブジェクトの重複を削除するのではなくてオブジェクト内のデータの重複を削除すると思いますのでこの流れで問題ないと思います。さきほど紹介したように重複を削除したあとにまたオブジェクトに戻すこともできます。
コメント