解析css文件并使用类作为键来构建背景图像数组

时间:2014-02-17 19:14:06

标签: php css regex arrays file-get-contents

我想在php中加载一个css文件,然后用css类创建一个所有背景图像的数组,它们用作数组键,忽略所有其他不调用背景图像的css块。下面是虚拟代码,但我想它看起来像这样:

function makeArrayOfBackroundImages($css) {
    $foo = someRegExKungfu;
    foreach ($foo as $class => $background) {
        $bar[] = $class => $background;
    }
    return $bar;
}

$css = file_get_contents('http://www.mysite.com/global.css');

$css = makeArrayOfBackroundImages($css);

所以对于以下css内容:

.content1 {
    background-image: url("http://mycdn.com/images/image1.png");
}
.content2 {
    background-image: url("http://mycdn.com/images/image2.png");
}
.content3 {
    background-image: url("http://mycdn.com/images/image3.png");
}
.content4 {
    margin:20px;
    border:1px solid #000;
}

数组看起来像这样:(注意只有具有背景图像的类才有特色)

[0] => Array
    (
        [content1] => http://mycdn.com/images/image1.png
        [content2] => http://mycdn.com/images/image2.png
        [content3] => http://mycdn.com/images/image3.png
 )

我这样做的原因是因为我正在构建一个脚本来测试页面的下载速度,并且它是一个真正的测试我还想下载在主页上使用的所有背景图像但是有css中列出的其他类和背景图像,用于主页以外的页面。我使用以下代码在主页上使用了所有类的数组:

@$dom->loadHTML('http://www.mysite.com');
$elems = $dom->getElementsByTagName('*');
foreach ($elems as $elm) {  
    if ($elm->hasAttribute('class')) {
        $classes[] = $elm->getAttribute('class');
}
}

因此,一旦我从上面的代码中获得了页面上使用的类,并且所有带有类名的背景图像的数组,我将下载背景图像,我有一个匹配的类名。希望这是有道理的。

1 个答案:

答案 0 :(得分:1)

尝试此功能:

function makeArrayOfBackroundImages($css) {
    if (!preg_match_all('/\.([a-z\d_]+)\s*\{[^{}]*url\("?([^()]+)"?\)?/i', $css, $arr)) return array();
    return array_combine($arr[1], $arr[2]);
}

注意:每个类只提取一个(第一个)图片网址。因此,它不适用于多个背景图像。