Cheerio返回带有hyphon和'/'的类的undefined

问题描述

我正在用cheerio刮擦检查点。我想从div获取“检查点消息”和“时间戳”。我的目的是在每个父div内获取消息和时间戳。

这将返回undefined：$('.roster__item.roster__item--flex.5\\/12.palm-1\\/1')。我究竟做错了什么？我知道我需要避开连字符和正斜线，但我没有选择。

https://www.tnt.fr/public/suivi_colis/recherche/visubontransport.do?bonTransport=9320002023749749&radiochoixrecherche=BT&radiochoixtypeexpedition=NAT

来自API响应的HTML：https://justpaste.it/35o9l

我的代码：

const req = require('rfr')
// const settings = req('/settings')

// libs
const select = req('/utils/common').select

// dependencies
const request = require('request')
const async = require('async')
const moment = require('moment')
const cheerio = require('cheerio')

function callApi (tracking,callback) {
  const options = {
    method: 'GET',url: `https://www.tnt.fr/public/suivi_colis/recherche/visubontransport.do?bonTransport=${tracking}&radiochoixrecherche=BT&radiochoixtypeexpedition=NAT`
  }

  request.get(options,(error,response,body) => {
    // console.log(body)
    if (error) return callback(error)
    else return callback(null,body)
  })
}

function refresh (tracking,callback) {
  const tno = tracking[0].tracking_number
  async.waterfall([
    // interact with API
    function get (waterfallCallback) {
      callApi(tracking,function (err,html) {
        if (err) return waterfallCallback(err)
        return waterfallCallback(null,cheerio.load(html))
      })
    },function transformHtml (html,waterfallCallback) {
      var $ = html
      var checkpoints = []

      // console.log(body)

      console.log('=======================')
      console.log($('.roster__item.roster__item--flex.5\\/12.palm-1\\/1').html())
      console.log('=======================')

      const update = {
        tracking_update: {
          tracking_number: tno,slug: 'tnt',checkpoints
        }
      }
    }],function waterfallDone (err,updates) {
    callback(err,updates)
  })
}

这些是HTML中的检查点：

<div class="roster roster-palm 1/1 tnt-even" style="padding-top: 11px; padding-bottom: 11px; padding-left: 28px;">
    <div class="roster__item roster__item--flex 5/12 palm-1/1" style="white-space: normal">Colis livr&#233;</div>
    <div class="roster__item roster__item--flex 3/12 palm-1/1">02/09/2020 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 12:08</div>
    <div class="roster__item roster__item--flex 4/12  palm-1/1"></div>
</div>
<div class="roster roster-palm 1/1 tnt-odd" style="padding-top: 11px; padding-bottom: 11px; padding-left: 28px;">
    <div class="roster__item roster__item--flex 5/12 palm-1/1" style="white-space: normal">D&#233;part en livraison</div>
    <div class="roster__item roster__item--flex 3/12 palm-1/1">02/09/2020 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 08:06</div>
    <div class="roster__item roster__item--flex 4/12  palm-1/1">TREMBLAY</div>
</div>
<div class="roster roster-palm 1/1 tnt-even" style="padding-top: 11px; padding-bottom: 11px; padding-left: 28px;">
    <div class="roster__item roster__item--flex 5/12 palm-1/1" style="white-space: normal">Arriv&#233;e &#224; l&#39;agence de destination</div>
    <div class="roster__item roster__item--flex 3/12 palm-1/1">02/09/2020 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 06:09</div>
    <div class="roster__item roster__item--flex 4/12  palm-1/1">TREMBLAY</div>
</div>
<div class="roster roster-palm 1/1 tnt-odd" style="padding-top: 11px; padding-bottom: 11px; padding-left: 28px;">
    <div class="roster__item roster__item--flex 5/12 palm-1/1" style="white-space: normal">Colis pris en compte par l'agence TNT</div>
    <div class="roster__item roster__item--flex 3/12 palm-1/1">01/09/2020 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 21:08</div>
    <div class="roster__item roster__item--flex 4/12  palm-1/1">CAEN</div>
</div>
<div class="roster roster-palm 1/1 tnt-even" style="padding-top: 11px; padding-bottom: 11px; padding-left: 28px;">
    <div class="roster__item roster__item--flex 5/12 palm-1/1" style="white-space: normal">Colis en cours d&#39;acheminement</div>
    <div class="roster__item roster__item--flex 3/12 palm-1/1">01/09/2020 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 20:00</div>
    <div class="roster__item roster__item--flex 4/12  palm-1/1"></div>
</div>
<div class="roster roster-palm 1/1 tnt-odd" style="padding-top: 11px; padding-bottom: 11px; padding-left: 28px;">
    <div class="roster__item roster__item--flex 5/12 palm-1/1" style="white-space: normal">Colis chez l'exp&#233;diteur</div>
    <div class="roster__item roster__item--flex 3/12 palm-1/1">01/09/2020 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 00:00</div>
    <div class="roster__item roster__item--flex 4/12  palm-1/1"></div>
</div>

解决方法

我是这样做的，而且效果很好：

let html = `<div class="roster roster-palm 1/1 tnt-even" style="padding-top: 11px; padding-bottom: 11px; padding-left: 28px;">
<div class="roster__item roster__item--flex 5/12 palm-1/1" style="white-space: normal">Colis livr&#233;</div>
<div class="roster__item roster__item--flex 3/12 palm-1/1">02/09/2020 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 12:08</div>
<div class="roster__item roster__item--flex 4/12  palm-1/1"></div>
</div>
<div class="roster roster-palm 1/1 tnt-odd" style="padding-top: 11px; padding-bottom: 11px; padding-left: 28px;">
<div class="roster__item roster__item--flex 5/12 palm-1/1" style="white-space: normal">D&#233;part en livraison</div>
<div class="roster__item roster__item--flex 3/12 palm-1/1">02/09/2020 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 08:06</div>
<div class="roster__item roster__item--flex 4/12  palm-1/1">TREMBLAY</div>
</div>
<div class="roster roster-palm 1/1 tnt-even" style="padding-top: 11px; padding-bottom: 11px; padding-left: 28px;">
<div class="roster__item roster__item--flex 5/12 palm-1/1" style="white-space: normal">Arriv&#233;e &#224; l&#39;agence de destination</div>
<div class="roster__item roster__item--flex 3/12 palm-1/1">02/09/2020 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 06:09</div>
<div class="roster__item roster__item--flex 4/12  palm-1/1">TREMBLAY</div>
</div>
<div class="roster roster-palm 1/1 tnt-odd" style="padding-top: 11px; padding-bottom: 11px; padding-left: 28px;">
<div class="roster__item roster__item--flex 5/12 palm-1/1" style="white-space: normal">Colis pris en compte par l'agence TNT</div>
<div class="roster__item roster__item--flex 3/12 palm-1/1">01/09/2020 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 21:08</div>
<div class="roster__item roster__item--flex 4/12  palm-1/1">CAEN</div>
</div>
<div class="roster roster-palm 1/1 tnt-even" style="padding-top: 11px; padding-bottom: 11px; padding-left: 28px;">
<div class="roster__item roster__item--flex 5/12 palm-1/1" style="white-space: normal">Colis en cours d&#39;acheminement</div>
<div class="roster__item roster__item--flex 3/12 palm-1/1">01/09/2020 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 20:00</div>
<div class="roster__item roster__item--flex 4/12  palm-1/1"></div>
</div>
<div class="roster roster-palm 1/1 tnt-odd" style="padding-top: 11px; padding-bottom: 11px; padding-left: 28px;">
<div class="roster__item roster__item--flex 5/12 palm-1/1" style="white-space: normal">Colis chez l'exp&#233;diteur</div>
<div class="roster__item roster__item--flex 3/12 palm-1/1">01/09/2020 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 00:00</div>
<div class="roster__item roster__item--flex 4/12  palm-1/1"></div>
</div>`;

const cheerio = require("cheerio");
const $ = cheerio.load(html);
let d = $(".roster__item.roster__item--flex.5\\/12.palm-1\\/1").html();
console.log(d);
// outputs: Colis livr&#xE9;