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&utm_medium=referral&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