如何从复杂的嵌套HTML代码中提取所有图片地址？

从嵌套HTML代码中提取图片地址

以下代码演示如何从给定的复杂嵌套HTML结构中提取所有图片文件名：

为了高效地提取嵌套HTML中的所有图片文件名，我们可以使用正则表达式结合Python的re模块。 这种方法避免了复杂的XML解析，直接从HTML字符串中匹配文件名。

‎ Gemini Storybook

Google Gemini推出的AI绘本生成工具

下载

<code class="python">import re

html_code = """
<li>favicon.ico</li>
<li class="expandable">
    <div class="hitarea expandable-hitarea"></div>
    banner-ads
    <ul style="display: block;">
        <li>ad01.png</li>
        <li>ad02.png</li>
        <li>ad03.png</li>
        <li>ad04.png</li>
        <li>ad06.jpg</li>
    </ul>
</li>
<li class="expandable">
    <div class="hitarea expandable-hitarea"></div>
    logos
    <ul style="display: block;">
        <li>logo-light.png</li>
        <li>logo.png</li>
    </ul>
</li>
<li class="expandable">
    <div class="hitarea expandable-hitarea"></div>
    news
    <ul style="display: block;">
        <li class="expandable">
            <div class="hitarea expandable-hitarea"></div>
            category
            <ul style="display: block;">
                <li>category1.png</li>
                <li>category2.png</li>
                <li>category3.png</li>
                <li>category4.png</li>
                <li>category5.png</li>
            </ul>
        </li>
        <li class="expandable">
            <div class="hitarea expandable-hitarea"></div>
            fashion
            <ul style="display: block;">
                <li>image1.png</li>
                <li>image2.png</li>
                <li>image3.png</li>
                <li>image4.png</li>
            </ul>
        </li>
        <li class="expandable">
            <div class="hitarea expandable-hitarea"></div>
            food
            <ul style="display: block;">
                <li>food01.png</li>
            </ul>
        </li>
        <li class="expandable">
            <div class="hitarea expandable-hitarea"></div>
            health
            <ul style="display: block;">
                <li>image1.png</li>
                <li>image2.png</li>
            </ul>
        </li>
        <li class="expandable">
            <div class="hitarea expandable-hitarea"></div>
            lifestyle
            <ul style="display: block;">
                <li>image1.jpg</li>
                <li>image2.png</li>
                <li>image3.png</li>
                <li>image4.png</li>
            </ul>
        </li>
        <li class="expandable">
            <div class="hitarea expandable-hitarea"></div>
            news-details
            <ul style="display: block;">
                <li>large-image.jpg</li>
            </ul>
        </li>
    </ul>
</li>
"""

image_filenames = re.findall(r'<li>([^<]+(?:\.(?:png|jpg|jpeg|gif)))</li>', html_code, re.IGNORECASE)
image_string = ",".join(image_filenames)
print(image_string)
</code>

这段代码使用了正则表达式 r'<li>([^<]+(?:\.(?:png|jpg|jpeg|gif)))</li>' 来匹配 <li> 标签内包含 .png, .jpg, .jpeg 或 .gif 扩展名的文件名。 re.IGNORECASE 忽略大小写。 最后，它将找到的文件名连接成一个以逗号分隔的字符串。 这是一种更直接、更高效的方法，尤其是在处理大型HTML文件时。

立即学习“前端免费学习笔记（深入）”；