如何使用php从HTML提取img src，标题和alt？

Question

我想创建一个页面，其中列出我网站上的所有图像，并附带标题和替代表示。

我已经给我写了一个小程序查找和加载所有的HTML文件，但现在我停留在如何提取src，title并alt依据此HTML：

<img **src** ="/image/fluffybunny.jpg" **title** ="Harvey the bunny" **alt** ="a cute little fluffy bunny" />

我猜应该用一些正则表达式来完成，但是由于标签的顺序可能会有所不同，而且我需要所有标签，所以我真的不知道如何以一种优雅的方式解析它（我可以通过char方式，但这很痛苦）。

Answer 1

编辑：现在我知道了

使用正则表达式解决此类问题不是一个好主意，]并且很可能导致无法维护和不可靠的代码。最好使用HTML解析器。

正则表达式解决方案

在这种情况下，最好将流程分为两部分：

• 获取所有的img标签
• 提取他们的元数据

我将假设您的文档不是xHTML严格的，因此您不能使用XML解析器。带有此网页源代码的EG：

/* preg_match_all match the regexp in all the $html string and output everything as 
an array in $result. "i" option is used to make it case insensitive */

preg_match_all('/<img[^>]+>/i',$html, $result);

print_r($result);
Array
(
    [0] => Array
        (
            [0] => <img src="/Content/Img/stackoverflow-logo-250.png" width="250" height="70" alt="logo link to homepage" />
            [1] => <img class="vote-up" src="/content/img/vote-arrow-up.png" alt="vote up" title="This was helpful (click again to undo)" />
            [2] => <img class="vote-down" src="/content/img/vote-arrow-down.png" alt="vote down" title="This was not helpful (click again to undo)" />
            [3] => <img src="http://www.gravatar.com/avatar/df299babc56f0a79678e567e87a09c31?s=32&d=identicon&r=PG" height=32 width=32 alt="gravatar image" />
            [4] => <img class="vote-up" src="/content/img/vote-arrow-up.png" alt="vote up" title="This was helpful (click again to undo)" />

[...]
        )

)

然后，我们使用循环获取所有img标签属性：

$img = array();
foreach( $result as $img_tag)
{
    preg_match_all('/(alt|title|src)=("[^"]*")/i',$img_tag, $img[$img_tag]);
}

print_r($img);

Array
(
    [<img src="/Content/Img/stackoverflow-logo-250.png" width="250" height="70" alt="logo link to homepage" />] => Array
        (
            [0] => Array
                (
                    [0] => src="/Content/Img/stackoverflow-logo-250.png"
                    [1] => alt="logo link to homepage"
                )

            [1] => Array
                (
                    [0] => src
                    [1] => alt
                )

            [2] => Array
                (
                    [0] => "/Content/Img/stackoverflow-logo-250.png"
                    [1] => "logo link to homepage"
                )

        )

    [<img class="vote-up" src="/content/img/vote-arrow-up.png" alt="vote up" title="This was helpful (click again to undo)" />] => Array
        (
            [0] => Array
                (
                    [0] => src="/content/img/vote-arrow-up.png"
                    [1] => alt="vote up"
                    [2] => title="This was helpful (click again to undo)"
                )

            [1] => Array
                (
                    [0] => src
                    [1] => alt
                    [2] => title
                )

            [2] => Array
                (
                    [0] => "/content/img/vote-arrow-up.png"
                    [1] => "vote up"
                    [2] => "This was helpful (click again to undo)"
                )

        )

    [<img class="vote-down" src="/content/img/vote-arrow-down.png" alt="vote down" title="This was not helpful (click again to undo)" />] => Array
        (
            [0] => Array
                (
                    [0] => src="/content/img/vote-arrow-down.png"
                    [1] => alt="vote down"
                    [2] => title="This was not helpful (click again to undo)"
                )

            [1] => Array
                (
                    [0] => src
                    [1] => alt
                    [2] => title
                )

            [2] => Array
                (
                    [0] => "/content/img/vote-arrow-down.png"
                    [1] => "vote down"
                    [2] => "This was not helpful (click again to undo)"
                )

        )

    [<img src="http://www.gravatar.com/avatar/df299babc56f0a79678e567e87a09c31?s=32&d=identicon&r=PG" height=32 width=32 alt="gravatar image" />] => Array
        (
            [0] => Array
                (
                    [0] => src="http://www.gravatar.com/avatar/df299babc56f0a79678e567e87a09c31?s=32&d=identicon&r=PG"
                    [1] => alt="gravatar image"
                )

            [1] => Array
                (
                    [0] => src
                    [1] => alt
                )

            [2] => Array
                (
                    [0] => "http://www.gravatar.com/avatar/df299babc56f0a79678e567e87a09c31?s=32&d=identicon&r=PG"
                    [1] => "gravatar image"
                )

        )

   [..]
        )

)

正则表达式占用大量CPU，因此您可能需要缓存此页面。如果没有缓存系统，则可以使用ob_start进行调整，并从文本文件加载/保存。

这些东西如何工作？

首先，我们使用preg_ match_ all，该函数获取与模式匹配的每个字符串并将其输出到它的第三个参数中。

正则表达式：

<img[^>]+>

我们将其应用于所有html网页。可以将其读取为 每个以“<img” 开头，包含非“>”字符并以>结束的字符串。

(alt|title|src)=("[^"]*")

我们先后将其应用于每个img标签。可以将其读为 以“ alt”，“ title”或“ src”开头的每个字符串，然后是“
=“，然后是“”，一堆不是“”并以“”结尾的东西隔离（）之间的子字符串
。

最后，每次您想处理正则表达式时，都拥有快速测试它们的好工具。检查此在线正则表达式测试仪。

编辑：回答第一个评论。

的确，我没有想到使用单引号的人（希望很少）。

好吧，如果仅使用’，只需将所有的’替换为’。

如果您混合两者。然后尝试使用（“ |’）代替，或使用”和[^ø]代替[^“]。