代码之家 › 专栏 › 技术社区 › G. Boyce

使用ChereIO从同一tr中提取多个值?

cheerio web-scraping node.js javascript

G. Boyce · 技术社区 · 6 年前

我正在构建一个webscape工具,以帮助为我正在构建的迷你sports odd数据库收集数据。我需要的数据位于 https://www.actionnetwork.com/mlb/live-odds .数据本身在“赌注”部分。下面是该页面的HTML示例,我正在对其进行迭代,并试图从中提取所需的数据。

HTML

<tbody>
 <tr>
  <td class="p-0"></td>
  <td class="text-right" style="height:104px"><span class="d-block highlight-green">-130<span class="fz-1 fz-md-2"></span></span><span class="d-block mt-1 highlight-green">9.5<span class="fz-1 fz-md-2"></span></span></td>
  <td class="text-right" style="height:104px"><span class="d-block highlight-green">-108<span class="fz-1 fz-md-2"></span></span><span class="d-block mt-1 highlight-green">9<span class="fz-1 fz-md-2"></span></span></td>
  <td class="text-right border-top-1 border-left-0 border-right-0 border-bottom-0" style="height:104px">
     <div class="text-center">
        <a class="" href="/subscribe">
           <svg viewBox="0 0 24 24" width="25" height="25" xmlns="https://www.w3.org/2000/svg" class="" style="stroke:#57A773;stroke-width:2;fill:#FFF">
              <path d="M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z"></path>
           </svg>
        </a>
     </div>
  </td>
  <td class="text-right border-left" style="height:104px"><span class="d-block ">51%</span><span class="d-block mt-1 ">49%</span></td>
  <td class="text-right border-right" style="height:104px">
     <a class="" href="/subscribe">
        <svg viewBox="0 0 24 24" width="30" height="30" xmlns="https://www.w3.org/2000/svg" class="" style="stroke:#57A773;stroke-width:2;fill:#FFF">
           <path d="M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z"></path>
        </svg>
     </a>
  </td>
  <td class="text-right" style="height:104px"><span class="d-block ">49%</span><span class="d-block mt-1 ">51%</span></td>
  <td class="text-right border-right" style="height:104px">
     <a class="" href="/subscribe">
        <svg viewBox="0 0 24 24" width="30" height="30" xmlns="https://www.w3.org/2000/svg" class="" style="stroke:#57A773;stroke-width:2;fill:#FFF">
           <path d="M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z"></path>
        </svg>
     </a>
  </td>
  <td class="text-right" style="height:104px"><span class="d-block highlight-green">-107<span class="fz-1 fz-md-2"></span></span><span class="d-block mt-1 highlight-green">9<span class="fz-1 fz-md-2"></span></span></td>
  <td class="text-right" style="height:104px"><span class="d-block highlight-green">-107<span class="fz-1 fz-md-2"></span></span><span class="d-block mt-1 highlight-green">9<span class="fz-1 fz-md-2"></span></span></td>
  <td class="text-right" style="height:104px"><span class="d-block highlight-green">-108<span class="fz-1 fz-md-2"></span></span><span class="d-block mt-1 highlight-green">9<span class="fz-1 fz-md-2"></span></span></td>
  <td class="text-right" style="height:104px"><span class="d-block highlight-green">-109<span class="fz-1 fz-md-2"></span></span><span class="d-block mt-1 highlight-green">9<span class="fz-1 fz-md-2"></span></span></td>
  <td class="text-right border-left" style="height:104px">No Picks</td>
  <td class="text-right d-flex flex-column" style="height:104px">
     <div><button type="submit" class="btn pointer font-weight-semibold btn-outline-primary m-0 fz-1 text-truncate">+</button></div>
     <div><button type="submit" class="btn pointer font-weight-semibold btn-outline-primary mt-1 fz-1 text-truncate">+</button></div>
  </td>
.............
</tr>

在实际的网页中,有几个这样的表行。我试图从下一行中提取每个表格行:

数据

<td class="text-right border-left" style="height:104px"><span class="d-block ">51%</span><span class="d-block mt-1 ">49%</span></td>

“d-块” 和 “d区mt-1” 包含我需要的信息。

下面是我用来做这件事的代码:

密码

const cheerio = require('cheerio');
const request = require('request')

request('https://www.actionnetwork.com/mlb/live-odds', function (err, res, html) 
{
if (!err && res.statusCode == 200) {
    var $ = cheerio.load(html);


    $('td.text-right.border-left span.d-block').each(function(i, element) {
        var a = $(this).prev();
        console.log(a.text())
    });

    $('td.text-right.border-left span.d-block').each(function(i, element) {
        var b = $(this).prev();
        console.log(b.text())
    }); 


}
});

首先,当第二个块运行并试图抓取另一个块时,第一个块正确地从网站中提取数据 <span> 它会打印出第一次测试的结果。

下一个问题是,我似乎不知道如何同时记录两个值。当它每行迭代时,它会打印出第一个跨度的值集,然后移动到下一个跨度并打印出该跨度的值集。理想情况下,它将在迭代时每行打印两个值。

1 回复 | 直到 6 年前

Marcos Casagrande 6 年前

您可以在一个循环中完成,只检索第一个循环 span 然后使用 .next 为了得到它的兄弟姐妹。

$('td.text-right.border-left span:first-child').each(function(i, element) {
  const a = $(this).text(); // 51%
  const b = $(this).next().text(); // 49%
  console.log(a, b);
});