Home > Back-end >  How to get a specific div's inline style using cheerio?
How to get a specific div's inline style using cheerio?

Time:03-06

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

<div >
   <div  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 
                 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 >
                 <a 
                        onclick="track_GA_Mixpanel({'hitType': 'event', 'category': 'TitleOfNews', 'action': 'clicked', 'label': 'Nag Ashwin seeks Mahindra&#39;s help to build futuristic vehicles for film, Mahindra replies)' });"
                        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 >
                        <a
                               href="/prev/en/news/nag-ashwin-seeks-mahindras-help-to-build-futuristic-vehicles-for-film-mahindra-replies-1646392977128"><span
                                      >short</span></a> by <span >Daisy Mowke</span> /
                        <span  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 >
                 <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 >
                        <a
                               href="/prev/en/news/nag-ashwin-seeks-mahindras-help-to-build-futuristic-vehicles-for-film-mahindra-replies-1646392977128"><span
                                      >short</span></a> by <span >Daisy Mowke</span> /
                        <span  itemprop="dateModified" content="2022-03-04T11:22:57.000Z">04:52
                               pm</span> on <span >04 Mar</span>
                 </div>
          </div>

          <div >
                 <div >read more at <a 
                               onclick="track_GA_Mixpanel({'hitType': 'event', 'category': 'ReadMore', 'action': 'clicked', 'label': 'Hindustan Times' });"
                               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.

CodePudding user response:

That would be:

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

To get the url:

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