如何使用 node.js Cheerio 一個一個地獲取元素

Question

我正在使用 Cheerio 制作 web 刮板，請求 Node.js。我使用了一些刮板，但我不知道 jQuery 熟悉的刮板，Cheerio。 無論如何，讓我們看看問題所在。

html

<li><a title="FR" class="A">176.31.239.33:8133</a></li>
<li><a title="FR" class="B">87.98.218.86:3128</a></li>
<li><a title="CN" class="A">183.62.60.100:80</a></li>
<li><a title="CN" class="A">183.131.152.227:80</a></li>
<li><a title="CN" class="A">183.238.133.43:80</a></li>

我想選擇具有 class="A" 的元素，然后選擇其文本(183.62.60.100:80) 。 然后將制作數組。

[ 
{ 'title' : 'FR', 'IP' : '176.31.239.33:8133' }, 
{ 'title' : 'CN', 'IP' : '183.62.60.100:80' },
...
]

但是我卡住了。 我試過...

var $ = cheerio.load(html);
var arr = $('a[class=A]').text();
console.log(arr) 

// result is 
// 176.31.239.33:8133183.62.60.100:80183.131.152.227.80

// if I print console.log(arr[0]), the result is just 1

reuslt不是數組，所以沒辦法一一挑出來。 我該怎么做？

Answer 1

您應該遍歷由jquery/cherrio選擇器返回的集合，並獲取每個元素的title屬性及其內部文本。 嘗試：

var $ = cheerio.load(html);
var arr = $('a[class=A]');   
var array = [];
arr.each(function() {
    array.push({
        title: $(this).attr('title'),
        IP: $(this).text()
    });
});

您也可以嘗試將$('a[class=A]')表達式替換$("aA") 。 它看起來更干凈。

Answer 2

Cheerio 遵循 collections 的 jQuery 操作風格，如果這是調用.text()之類的聚合器 function 的話。 如果您想要單獨顯示每個元素的文本，請對其進行迭代或 map。

這是現有答案的替代方案：

const cheerio = require("cheerio"); // 1.0.0-rc.12

const html = `
<li><a title="FR" class="A">176.31.239.33:8133</a></li>
<li><a title="FR" class="B">87.98.218.86:3128</a></li>
<li><a title="CN" class="A">183.62.60.100:80</a></li>
<li><a title="CN" class="A">183.131.152.227:80</a></li>
<li><a title="CN" class="A">183.238.133.43:80</a></li>
`;
const $ = cheerio.load(html);
const data = [...$("a.A")].map(e => ({
  title: $(e).attr("title"),
  IP: $(e).text(),
}));
console.log(data);

也可以使用 jQuery 風格的映射器和.get()或.toArray()來返回原生數組：

const data = $("a.A")
  .map((i, e) => ({
    title: $(e).attr("title"),
    IP: $(e).text(),
  }))
  .toArray();

請注意， map的 arguments 是(index, element) in jQuery 而不是(element, index)與原生 JS map 。

喜歡這個的理由：

• map是常見迭代習慣用法的特例：

   const result = []; array.forEach(e => { result.push(transform(e)); }); return result;

  哪個更干凈，更容易寫成：

   const result = array.map(transform);

• 選擇器"aA"通常優於'a[class="A"]' ，因為[class="A"]非常具體。 如果再添加一個 class，就會失敗。 與map ，寫入和讀取更簡單。