Как получить style = background-img URL с помощью Cheerio

#javascript #html #jquery #node.js #cheerio

#javascript #HTML #jquery #node.js #приветствие

Вопрос:

Я пытаюсь получить URL фонового изображения. Фоновое изображение находится в теге a href.

тег href, style="background-img:url("")"

Я использую cheerio (node.js модули, похожие на Jquery). Пока я пытаюсь получить это, выдает ошибку,

Ошибка типа: не удается прочитать свойство «заменить» для неопределенного

Мой код:

 $("div.listing.listing-blog.listing-blog-1.clearfix.columns-1.columns-1 > article > .item-inner  .featured.clearfix  a").map(function () {
    let imgURL = $(this).css("background-image");
    imgURL = imgURL.replace(/.*s?url(['"]?/, '').replace(/['"]?).*/, '');
    return { imgURL };
  }).get();

Это элемент, из которого требуется URL фонового изображения:

 <article class="post-431236 type-post format-standard has-post-thumbnail   listing-item listing-item-blog  listing-item-blog-1 main-term-51 bsw-5 ">
<div class="item-inner clearfix">
<h2 class="title"> <a href="https://arynews.tv/en/nab-money-laundering-reference-shehbaz-sharif/" class="post-url post-title">
POST TITLE </a>
</h2>
<div class="featured clearfix">
<a alt="nab, shehbaz sharif, pml-n, benami assets" title="NAB prepares money-laundering reference against Shehbaz Sharif: sources" data-bs-srcset="{amp;quot;baseurlamp;quot;:amp;quot;https://arynews.tv/wp-content/uploads/2020/09/amp;quot;,amp;quot;sizesamp;quot;:{amp;quot;210amp;quot;:amp;quot;shehbaz-1-1-210x136.jpgamp;quot;,amp;quot;279amp;quot;:amp;quot;shehbaz-1-1-279x220.jpgamp;quot;,amp;quot;357amp;quot;:amp;quot;shehbaz-1-1-357x210.jpgamp;quot;,amp;quot;750amp;quot;:amp;quot;shehbaz-1-1.jpgamp;quot;}}" class="img-holder    b-loaded" href="https://arynews.tv/en/nab-money-laundering-reference-shehbaz-sharif/" style="background-image: url(amp;quot;https://arynews.tv/wp-content/uploads/2020/09/shehbaz-1-1-279x220.jpgamp;quot;);"></a>
</div>

1. В jQuery нет ничего плохого, поэтому вы уверены, что селектор правильный? Можете ли вы показать нам CSS для элемента?

2. не удается прочитать свойство для неопределенного — просто добавьте предложение, что-то вроде let imgURL = $(this).css("background-image") || "";

3. Я использую Cheerio, он похож на Jquery. Но я становлюсь неопределенным.

Ответ №1:

у cheerio нет этих методов, вам нужно использовать attr():

 // untested, I have no idea what your element looks like
$(a).attr('style').match(/url("(.*?)"/)[1]

1. Большое вам спасибо! Я пытался, но это не сработало. Хотя я добавил элемент, проверьте выше. Мне нужен URL фонового изображения, который соответствует стилю.

2. Это сработало, спасибо!

Ответ №2:

Используя чистый, js без jQuery , вы можете ввести:

 const selector = `div.listing.listing-blog.listing-blog-1.clearfix.columns-1.columns-1 > article > .item-inner  .featured.clearfix  a`;

const imgURL = document.querySelector(selector).style.background

Вы получите строку типа

 "url("http://localhost:1337/uploads/offline_reset_45146034ad.jpg") center center no-repeat"

Следующий шаг — получить URL из этой строки с помощью регулярного выражения.

И ваш пример:

 imgURL.replace(/.*s?url(['"]?/, '').replace(/['"]?).*/, '')

отлично работает, предоставляя

 "http://localhost:1337/uploads/offline_reset_45146034ad.jpg"

1. Он возвращает мне imgURL =» Что мне делать?

2. покажите document.querySelector(selector).innerHTML и вставьте его в свой вопрос

3. Я добавил элемент, приведенный выше в вопросе. Проверьте это, я хочу получить img URL. Который находится в стиле background img URL