How to get Css Background image URL text from relative URL?

Question

I want to get text of background-image URL. Expect Output:

123
http://123.com
 (It is empty)

But Actual Output:

$('#p1').html($('#bg1').css('background-image').replace('url(','').replace(')','').replace(/\"/gi, ""));
$('#p2').html($('#bg2').css('background-image').replace('url(','').replace(')','').replace(/\"/gi, ""));
$('#p3').html($('#bg3').css('background-image').replace('url(','').replace(')','').replace(/\"/gi, ""));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="/1" id="bg1" style="background-image: url('123');"></a>
<p id="p1"></p>
<a href="/2" id="bg2" style="background-image: url('http://123.com');"></a>
<p id="p2"></p>
<a href="/3" id="bg3" style="background-image: url('');"></a>
<p id="p3"></p>

I know that this function can be implemented by manipulating strings.

Is there any other way?

I know this css is not specification, But I want to write GreaseMonkey UserScript to hack other Website.

Solved:

This style.backgroundImage saved me! Thank!

$.fn.extend({
    getBackgroundUrl: function () {
        let imgUrls = [];
        $(this).each(function (index, ele) {
            let bgUrl = ele.style.backgroundImage || 'url("")';
            bgUrl = bgUrl.match(/url\((['"])(.*?)\1\)/)[2];
            imgUrls.push(bgUrl);
        });
        return imgUrls.length === 1 ? imgUrls[0] : imgUrls;
    }
});
    
$('p').html($('a').getBackgroundUrl().join(','));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="/1" id="bg1" style="background-image: url('123');"></a>
<a href="/2" id="bg2" style="background-image: url('http://123.com');"></a>
<a href="/3" id="bg3" style="background-image: url('');"></a>
<p></p>

What is your intention?

PrathapG
– PrathapG

2018-10-10 02:55:46 +00:00
Commented Oct 10, 2018 at 2:55 — PrathapG
– PrathapG, Commented Oct 10, 2018 at 2:55

CertainPerformance · Accepted Answer · 2018-10-10 03:11:33Z

1

You can do that a lot easier with a single regular expression: match the url and the opening parentheses, capture the single or double quote, then capture and lazy-repeat characters until you get to the next single or double quote:

const getUrl = str => str.match(/url\((['"])(.*?)\1\)/)[2];
$('a').each((_, a) => console.log(getUrl(a.style.backgroundImage)));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="/1" id="bg1" style="background-image: url('123');"></a>
<p id="p1"></p>
<a href="/2" id="bg2" style="background-image: url('http://123.com');"></a>
<p id="p2"></p>
<a href="/3" id="bg3" style="background-image: url('');"></a>
<p id="p3"></p>

No need for a big library like jQuery just to select elements, you can do it in vanilla JS quite easily too:

const getUrl = str => str.match(/url\((['"])(.*?)\1\)/)[2];
document.querySelectorAll('a').forEach((a) => {
  console.log(getUrl(a.style.backgroundImage));
});

<a href="/1" id="bg1" style="background-image: url('123');"></a>
<p id="p1"></p>
<a href="/2" id="bg2" style="background-image: url('http://123.com');"></a>
<p id="p2"></p>
<a href="/3" id="bg3" style="background-image: url('');"></a>
<p id="p3"></p>

edited Oct 10, 2018 at 3:11

answered Oct 10, 2018 at 2:55

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ahaochan Over a year ago

Thank! a.style.backgroundImage saved me! But JQuery how to do?

Ahaochan Over a year ago

Have any way to avoid use each function or cast to DOM object?

CertainPerformance Over a year ago

See edit, use querySelectorAll instead - definitely no need for jQuery if you don't want to use jQuery!

Kaiido Over a year ago

What you did here is to check the style attribute's value, your regex doesn't do anything better than OP's string's manip. What they did wrong(?) was to check the computedValue returned by css().

Ahaochan Over a year ago

@CertainPerformance Maybe you misunderstood, I rely on JQuery. See edit, I Solved it. Thank!

Collectives™ on Stack Overflow

How to get Css Background image URL text from relative URL?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related