文章/答案/技术大牛

发布

社区首页 >问答首页 >从HTML、CSS和JavaScript提取所有图像文件的Regex

问从HTML、CSS和JavaScript提取所有图像文件的Regex
EN

Stack Overflow用户

提问于 2018-07-05 10:08:59

回答 1查看 445关注 0票数 0

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

下面是我在文件中找到的一些例子：

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"

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

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

但是我还包括我不需要的base64 64编码文件，而且在我的HTML匹配中也有一些不必要的部分，例如：

"icon" sizes="192x192" href="touch-icon-192x192.png"

所以我只需要touch-icon-192x192.png。

如何使用PHP解析我的文件并获得引用的png、gif和jpeg图像的清晰列表？regex对此有好处吗?还是有更好的方法来完成这样的任务？

编辑：

这里可以接受的答案是：How do you parse and process HTML/XML in PHP?是一个软件库和其他场外资源的集合，我在这里问的是一个与编程有关的问题，关于regex。

php

regex

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-07-05 11:58:22

以下是完成这项工作的一种方法：

$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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51188601

复制

相似问题

问从HTML、CSS和JavaScript提取所有图像文件的Regex
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从HTML、CSS和JavaScript提取所有图像文件的RegexEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从HTML、CSS和JavaScript提取所有图像文件的Regex
EN