Question

我需要获取HTML，CSS和JavaScript文件中引用的所有图像文件的列表。

以下是一些我可以在文件中找到的内容的示例：

$input = str_replace(PHP_EOL, '', $input);
    $input = preg_replace("/\r|\n/", "", $input);
    $input = str_replace('href="/images/', 'href="http://example.com/images/', $input);

使用https://regex101.com/我想到了以下表达式：

CSS:
ul li {
    list-style-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
}

#insert { background-image: url('../img/insert.jpg'); }
#delete { background-image: url('../img/delete.png'); }

HTML:
<link rel="icon" sizes="192x192" href="touch-icon-192x192.png">
<img id="home" src="img/home.png" class="img-home">

JavaScript:
"BackgroundImageUrl": "textures/glass.jpg"

但是我还包含了我不需要的base64编码文件，此外，在我的HTML匹配中，还有一些不必要的部分，例如：

/[\"'](.*(png|jpg|gif))[\"']?/ig

我只需要"icon" sizes="192x192" href="touch-icon-192x192.png"。

如何使用PHP解析文件并获得引用的touch-icon-192x192.png，png和gif图像的干净列表？ jpeg对此有好处，还是有更好的方法在PHP中完成这样的任务？

编辑：

这里接受的答案是：How do you parse and process HTML/XML in PHP?是软件库和其他非现场资源的集合，在这里我要问的是与正则表达式有关的与编程相关的问题。

Answer 1

这是完成任务的一种方法：

$input = <<<EOD
CSS:
ul li {
    list-style-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
}

#insert { background-image: url('../img/insert.jpg'); }
#delete { background-image: url('../img/delete.png'); }

HTML:
<link rel="icon" sizes="192x192" href="touch-icon-192x192.png">
<img id="home" src="img/home.png" class="img-home">

JavaScript:
"BackgroundImageUrl": "textures/glass.jpg"
EOD;

preg_match_all('/(?<=["\'])[^"\']+?\.(?:jpe?g|png|gif)(?=["\'])/', $input, $m);
print_r($m);

输出：

Array
(
    [0] => Array
        (
            [0] => ../img/insert.jpg
            [1] => ../img/delete.png
            [2] => touch-icon-192x192.png
            [3] => img/home.png
            [4] => textures/glass.jpg
        )

)

说明：

(?<=["\'])          : lookbehind, make sure we have a quote before
[^"\']+?            : 1 or more any character that is not a quote
\.                  : a dot
(?:jpe?g|png|gif)   : non capture group, list of image extensions
(?=["\'])           : lookahead, make sure we have a quote after

正则表达式可从HTML，CSS和JavaScript中提取所有图像文件

1 个答案: