【问题标题】:match image tags with regEx使用正则表达式匹配图像标签
【发布时间】:2009-05-06 19:54:42
【问题描述】:

我在使用这个正则表达式时遇到了一些问题:

<img(.+)src="_image/([0-9]*)/(.+)/> 

全局和不区分大小写的标志已打开。

问题是它也抓取了 Image n(见下面的字符串),但我希望它只匹配字符串中的图像标签。

<p>Image 1:<img width="199" src="_image/12/label" alt=""/> Image 2: <img width="199" src="_image/12/label" alt=""/><img width="199" src="_image/12/label" alt=""/></p>

如果我在 Image n 之前添加一个换行符,它会起作用 :)

谁能指出我做错了什么?

提前致谢 鲍勃

【问题讨论】:

    标签: javascript regex replace


    【解决方案1】:

    使用非贪婪的正则表达式:

    ? src="_image/(\d+)/(.+?)/.?>

    【讨论】:

    • 这不起作用,因为它会一直读取第二组中的所有内容,直到标签关闭,他的第二组将不是他所追求的
    【解决方案2】:

    如果我正确解释了您的正则表达式,看起来您在第一组中的目录名称和第二组中的文件路径之后?

    <IMG.*?SRC="/_image/(\d+?)/([^"]*?)".*?/>
    

    不要忘记使用正则表达式选项 CaseInsensitive,它用 (?i:[regex]) 包装正则表达式

    在第二组中,您正在解析所有不是结束符 ",现在您正在查找所有字符,事实上,您不需要搜索所有字符,您需要所有不是字符串的右引号。

    另外,不要忘记关闭您丢失的 SRC 字符串,并且 SRC 属性可能不是标签中的最后一个 - 例如边框、宽度、高度等。此外,可能有任何数字最后一个属性关闭和标签结束后的空格数 />

    从这个正则表达式中,您的第一个匹配组将保存子目录名称,第二个匹配组将保存子目录 / 之后的所有内容 - 包括嵌套的子目录。如果你有嵌套的子目录,你可能需要稍微扩展一下:

    <IMG.*?SRC="/_image/((\d+?)/)+?([^"]*?)".*?/>
    

    在这种情况下,每个前导组将保存每个嵌套目录名,最后一组将保存文件名。

    【讨论】:

      【解决方案3】:

      你尝试过惰性求值吗?当我尝试类似的东西时,这在某个时候奏效了。

      【讨论】:

      • 基本正确,但所呈现的正则表达式也存在其他错误。
      【解决方案4】:

      正则表达式根本不擅长解析 HTML(请参阅 Can you provide some examples of why it is hard to parse XML and HTML with a regex? 了解原因)。您需要的是一个 HTML 解析器。有关使用各种解析器的示例,请参阅 Can you provide an example of parsing HTML with your favorite parser?

      【讨论】:

      • 如果你正确使用它们,它们在解析任何东西方面都不错。当然,如果您不知道自己在做什么,这可能会很困难 - 但困难和坏是两件不同的事情。
      • 正则表达式无法解析 HTML(除非它们包含 Perl 添加的一些扩展,使它们不再是正则)。这不是什么难事,完全不可能。要解析 HTML,您需要递归,而正则表达式不能递归(同样,除非您使用 Perl 的某些扩展)。即使您有可以处理递归的方言,您需要编写以正确处理 HTML 的正则表达式也比使用解析器复杂得多,那么您为什么要自己这样做呢?当然,您确实说过“正确使用它们”,既然在 HTML 上使用它们是错误的,那么您仍然是对的。
      • 顺便说一句,第一个链接直接针对像你这样坚持认为正则表达式可以处理 HTML 或 XML 的人,所以仔细阅读并尝试想出一个正则表达式而不是可以处理其中提出的案件。然后阅读第二个链接,看看使用解析器有多容易。
      【解决方案5】:

      您正在使用 greedy 量词 (+),没有太多限制。一个贪婪的量词告诉正则表达式引擎:“抓住每一个符合条件的字符,只退到足以完成正则表达式的程度。”这意味着它将从字符“image/nnnnnn/something/”的第一个序列中获取。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2013-08-09
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2013-04-30
        相关资源
        最近更新 更多