如果存在img，如何在<>之间选择src？

Question

我需要使用以下形式的正则表达式选择src="：//，但前提是它位于图像标记内。

这应该返回true： <img alt="Alt text" src="/directory/Images/my-image.jpg" />

此返回false： <script type="text/javascript" async="" src="https://www.google-analytics.com/analytics.js"></script>

最终结果将替换我正在使用的应用程序执行的scr="，我需要使用正则表达式进行查找。

Answer 1

首先，标准免责声明：如果您使用正则表达式来解析HTML DOM，则说明您是做错了 。对于所有结构化数据（XML，JSON等），解析HTML的正确方法是使用为此目的而构建的内容，然后使用其查询系统对其进行查询。

也就是说，通常情况下，您想要的是在命令行或编辑器的搜索字段等上进行快速修改，而又不想或不愿意编写在DOM中加载的应用程序分析库。

在这种情况下，如果您实际上不是在编写程序，并且您不介意在某些极端情况下尝试使用的任何正则表达式都可能会中断，那么请考虑以下内容：

/<img\b[^<>]+\bsrc\s*=\s*"([^"]+)"/i ...可能用您的语言用来表示不区分大小写的正则表达式的其他任何内容替换前导/和后缀/i。

请注意，这是假设，URL用双引号引起来，标签格式正确，文档中没有多余的<img字符串，URL中没有双引号，还有无数其他没想到，但是一个合适的解析器会。这些假设是使用解析器如此重要的很大一部分：它没有做出这样的假设，并且如果喂入垃圾，则会正确地让您知道您这样做了，而不是尝试消化它并以后让您痛苦。 / p>

• <img\b-一个img标签。边界一词可确保它不是imgur标记或其他任何标记。
• [^<>]+-一个或多个字符，没有结束标签，为了安全起见，也没有开头标签。
• \bsrc\s*=\s*-'src ='，但具有可选的空格和另一个单词边界检查。
• "([^"]+)"-一些用引号引起来的非引号字符组成的URL。

现在，请注意，由于我们不对URL进行安全检查，因此您可能会抢走任何东西，例如javascript:...something malicious...，或者它可能有6GB长-您只是不知道。您可以添加检查此类内容的方法，但是除非您控制输入并确切知道要解析的内容，否则您总会错过某些内容。

您提到“我的应用程序”的确意味着我必须重申：如果您正在编写应用程序，以上内容几乎肯定是 错误的方式 您应该问的问题可能更接近于“如何以我选择的编程语言从HTML页面获取img标签的src属性的值？”而不是“我如何使用正则表达式从此HTML标签提取此令牌？”

我这么说并不是说“象牙塔的计算机科学家会低头看着你”-尽管我承认编程中可能有很多这样的卑鄙行为：D

我的意思更像是……“当您遇到边缘情况时，您将感到痛苦，然后陷入一个无限完善您的正则表达式的深坑里。您可以可以使用简单的单行代码（比正则表达式好得多）来避免痛苦，也许像{LGSon在评论中建议的那样document.querySelector('img[src^="/directory/Images"]')。

人们之所以这样说，是因为他们已经有这种痛苦，并且他们畏缩着你也可能遭受痛苦的想法。

Answer 2

有几种匹配方法。 This RegEx只是一个例子，它不一定是最好的表达方式：

(src=")(.+)(.jpg|.JPG|.PNG|.png|.JPEG)"

您可以使用捕获组()包装目标图像URL，也许类似于this expression：

(src=")((.+)(.jpg|.JPG|.PNG|.png|.JPEG))"

，只需使用$2（第2组）进行调用即可。

您还可以根据需要通过添加诸如this expression之类的忽略标志来简化它：

src="((.+)(\.[a-rt-z]+))"