How to extract image filename from style/background-image tag?

Question

I found lots of posts regarding estracting a filename from an img-tag, but none from a CSS inline style tag. Here's the source string

<span style="width: 40px; height: 30px; background-image: url("./files/foo/bar.png");" class="bar">FOO</span>

What I want to get is bar.png.

I tried this:

    $pattern = "/background-image: ?.png/";
    preg_match($pattern, $string, $matches);

But this didnt work out.

Any help appreciated..

Same solution as [Regular expression for grabbing the href attribute of an A element](http://stackoverflow.com/questions/3820666/regular-expression-for-grabbing-the-href-attribute-of-an-a-element). Use DOM to fetch the style attribute, then use a regular expression to grab the background-image value — Gordon, Dec 13 '10 at 12:52

Colin Fine · Answer 1 · 2010-12-14T14:50:20.233

2

You need to read up about regular expressions.

"/background-image: ?.png/"

means "background-image:" followed optionally by a space, followed by any single character, followed (directly) by "png".

Exactly what you need depends on how much variation you need to allow for in the layout of the tag, but it will be something like

 "/background-image\s*:\s*url\s*(\s*".*([^\/]+)"/

where all the "\s*" are optional spaces, and parenthesis captures something that doesn't contain a slash.

Generally, regexp is not a good tool for parsing HTML, but in this limited case it might be OK.

edited Dec 14 '10 at 14:50

answered Dec 13 '10 at 12:53

Colin Fine

3,334
1
20
32

The ',' in your regex should be a '.' – Pit Dec 13 '10 at 12:56

score 1 · Accepted Answer · answered Dec 13 '10 at 12:59

$string = '<span style="width: 40px; height: 30px; background-image: url("./files/foo/bar.png");" class="bar">FOO</span>';

$pattern = '/background-image:\s*url\(\s*([\'"]*)(?P<file>[^\1]+)\1\s*\)/i';
$matches = array();
if (preg_match($pattern, $string, $matches)) {
    echo $matches['file'];
}

score 0 · Answer 3 · answered Dec 13 '10 at 12:59

something along the lines

$style = "width: 40px; height: 30px; background-image: url('./files/foo/bar.png');";
preg_match("/url[\s]*\(([\'\"])([^\'\"]+)([\'\"])\)/", $style, $matches);
var_dump($matches[2]);

it wont work for filenames that contain ' or ". It basically matches anything between the parenthesis of url() that is not ' or "

How to extract image filename from style/background-image tag?

3 Answers3