如何使用 cheerio 获取特定 div 的内联样式？

Question

我正在尝试在 node.js 上使用 cheerio 获取 div 的内联样式（背景图片）。

<div class="">
   <div class="news-card z-depth-1" itemscope itemtype="http://schema.org/NewsArticle">
          <span content="" itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage"
                 itemid="https://example.com/en/news/nag-ashwin-seeks-mahindras-help-to-build-futuristic-vehicles-for-film-mahindra-replies-1646392977128"></span>
          <span itemtype="https://schema.org/Person" itemscope="itemscope" itemprop="author">
                 <span itemprop="name" content="Daisy Mowke"></span>
          </span>
          <span itemprop="description"
                 content="Nag Ashwin seeks Mahindra&#39;s help to build futuristic vehicles for film, Mahindra replies"></span>
          <span itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
                 <meta itemprop="url"
                        content="https://static.example.com/example/images/v1/variants/jpg/m/2022/03_mar/4_fri/img_1646391607355_815.jpg?">
                 </meta>
                 <meta itemprop="width" content="864">
                 </meta>
                 <meta itemprop="height" content="483">
                 </meta>
          </span>
          <span itemtype="https://schema.org/Organization" itemscope="itemscope" itemprop="publisher">
                 <span itemprop="url" content="https://example.com/"></span>
                 <span itemprop="name" content="example"></span>
                 <span itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
                        <span itemprop="url"
                               content="https://assets.example.com/example/images/v1/variants/jpg/m/2018/11_nov/21_wed/img_1542823931298_497.jpg"></span>
                        <meta itemprop="width" content="400">
                        </meta>
                        <meta itemprop="height" content="60">
                        </meta>
                 </span>
          </span>
          <div class="news-card-image"
                 style="background-image: url('https://static.example.com/example/images/v1/variants/jpg/m/2022/03_mar/4_fri/img_1646391607355_815.jpg?')">
          </div>
          <div class="news-card-title news-right-box">
                 <a class="clickable"
                        onclick="track_GA_Mixpanel({'hitType': 'event', 'category': 'TitleOfNews', 'action': 'clicked', 'label': 'Nag%20Ashwin%20seeks%20Mahindra&#39;s%20help%20to%20build%20futuristic%20vehicles%20for%20film%2C%20Mahindra%20replies)' });"
                        style="color:#44444d!important"
                        href="/en/news/nag-ashwin-seeks-mahindras-help-to-build-futuristic-vehicles-for-film-mahindra-replies-1646392977128">
                        <span itemprop="headline">Nag Ashwin seeks Mahindra&#39;s help to build futuristic vehicles
                               for film, Mahindra replies</span>
                 </a>
                 <div class="news-card-author-time news-card-author-time-in-title">
                        <a
                               href="/prev/en/news/nag-ashwin-seeks-mahindras-help-to-build-futuristic-vehicles-for-film-mahindra-replies-1646392977128"><span
                                      class="short">short</span></a> by <span class="author">Daisy Mowke</span> /
                        <span class="time" itemprop="datePublished" content="2022-03-04T11:22:57.000Z">04:52
                               pm</span> on <span clas="date">04 Mar 2022,Friday</span>
                 </div>
          </div>
          <div class="news-card-content news-right-box">
                 <div itemprop="articleBody">Director Nag Ashwin, who&#39;s shooting &#39;Project K&#39; starring
                        Prabhas, Amitabh Bachchan and Deepika Padukone, sought Anand Mahindra&#39;s support in
                        building futuristic vehicles for the movie. &#34;How could we refuse an opportunity to help
                        you envision the future of mobility?&#34; Mahindra responded. &#34;Chief of Global Product
                        Development @Velu_Mahindra will...happily throw his weight behind you,&#34; he added.</div>
                 <div class="news-card-author-time news-card-author-time-in-content">
                        <a
                               href="/prev/en/news/nag-ashwin-seeks-mahindras-help-to-build-futuristic-vehicles-for-film-mahindra-replies-1646392977128"><span
                                      class="short">short</span></a> by <span class="author">Daisy Mowke</span> /
                        <span class="time" itemprop="dateModified" content="2022-03-04T11:22:57.000Z">04:52
                               pm</span> on <span class="date">04 Mar</span>
                 </div>
          </div>

          <div class="news-card-footer news-right-box">
                 <div class="read-more">read more at <a class="source"
                               onclick="track_GA_Mixpanel({'hitType': 'event', 'category': 'ReadMore', 'action': 'clicked', 'label': 'Hindustan%20Times' });"
                               target="_blank"
                               href="https://www.hindustantimes.com/entertainment/telugu-cinema/nag-ashwin-asks-anand-mahindra-s-support-to-build-futuristic-vehicles-for-his-prabhasstarrer-101646389522586-amp.html?utm_campaign=fullarticle&amp;utm_medium=referral&amp;utm_source=example ">Hindustan
                               Times</a></div>
          </div>


   </div>

在这个例子中，div with class: "news-card-image" 包含一种内联样式，这是我想要的。如果我可以将整个 div 作为字符串得到，那么也可以，我将操作该字符串并提取背景图像的 url。

Answer 1

那就是：

$('.news-card-image').attr('style')

获取url:

$('.news-card-image').attr('style').match(/'(.*)'/)[1]

如何使用 cheerio 获取特定 div 的内联样式？

How to get a specific div's inline style using cheerio?

node.js

web

web-scraping

cheerio