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

I’m trying to get a div’s inline styling (background image) using cheerio on node.js.

<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'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'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'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's shooting 'Project K' starring
                        Prabhas, Amitabh Bachchan and Deepika Padukone, sought Anand Mahindra's support in
                        building futuristic vehicles for the movie. "How could we refuse an opportunity to help
                        you envision the future of mobility?" Mahindra responded. "Chief of Global Product
                        Development @Velu_Mahindra will...happily throw his weight behind you," 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>

In this example, the div with class: “news-card-image” contains one inline style, which I want. if i can get this whole div as a string then also fine, I will manipulate the string and extract the url of backgroun image.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

That would be:

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

To get the url:

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


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x