同时匹配img标签中的src和alt的正则表达式

你左我右啊在 2022年10月30日那天发布在编程思想栏目， 2024年05月05日那天又修改过，到今天为止已经被浏览过85045次了。

做内容发布系统的时候，需要将发布的文章中的远程图片做本地缓存处理，那么这就涉及到使用正则表达式来匹配 img 标签中的 src 属性和 alt 属性等。
img 标签中的属性顺序不固定，因此不能使用常见的顺序匹配，这里就需要一个兼容所有可能的正则表达式，具体请看下方代码。

$imgRegex='/<\s*img[\s\S]+?(?:src=[\'"]([\S\s]*?)[\'"]\s*|alt=[\'"]([\S\s]*?)[\'"]\s*|[a-z]+=[\'"][\S\s]*?[\'"]\s*)+[\s\S]*?>/i';
// 这里最重要的就是中间括号的非捕获部分。
// (?:src=[\'"]([\S\s]*?)[\'"]\s*|alt=[\'"]([\S\s]*?)[\'"]\s*|[a-z]+=[\'"][\S\s]*?[\'"]\s*)+
// 将 src alt 列出来，同时将其他可能的属性也作为匹配
// src=[\'"]([\S\s]*?)[\'"]\s*
// alt=[\'"]([\S\s]*?)[\'"]\s*
// [a-z]+=[\'"][\S\s]*?[\'"]\s*

上面的正则表达式即可匹配无顺序的 img 标签中的 src 属性和 alt 属性

测试用例

<?php
    $str="<img src='/img1' alt='fadsf'>";
    $str2="<img alt='fadsf' src='/img2'>";
    $imgRegex='/<\s*img[\s\S]+?(?:src=[\'"]([\S\s]*?)[\'"]\s*|alt=[\'"]([\S\s]*?)[\'"]\s*|[a-z]+=[\'"][\S\s]*?[\'"]\s*)+[\s\S]*?>/i';
    preg_match($imgRegex,$str,$matcher);
    preg_match($imgRegex,$str2,$matcher2);
    print_r($matcher);
    print_r($matcher2);

输出结果

Array
(
    [0] => <img src='/img1' alt='fadsf'>
    [1] => /img1
    [2] => fadsf
)
Array
(
    [0] => <img alt='fadsf' src='/img2'>
    [1] => /img2
    [2] => fadsf
)