如何从样式/背景图像标签中提取图像文件名？

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..

Answer 1

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.

Answer 2

$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'];
}

Answer 3

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 "