使用正则表达式获取 HTML/Js 中的图像 URL答案

【问题标题】：Use regex to get image URL in HTML/Js使用正则表达式获取 HTML/Js 中的图像 URL
【发布时间】：2023-04-08 23:11:01
【问题描述】：

我想在 Js/HTML 中获取一些图片的 URL：

var a = "http://sub.domain.com/uploads/files/11-11-2011/345301-574-1182-393/2202.jpg";
var b = "http://sub.domain.com/uploads/files/23-11-2011/234552-574-2321-232/asd.png";

寻找可以检测图片网址的解决方案。所以输出将是：

http://sub.domain.com/uploads/files/11-11-2011/345301-574-1182-393/2202.jpg
http://sub.domain.com/uploads/files/23-11-2011/234552-574-2321-232/asd.png

谢谢！

【问题讨论】：

要明确一点：您想扫描整个 HTML 源文件，其中还包含 JavaScript 部分中的 URL 字符串？

标签： html regex

【解决方案1】：

根据您提供的信息，这应该可行：

(https?:\/\/.*\.(?:png|jpg))

您可以通过在jpg 之后添加|ext 来添加更多扩展。这也将允许带有https 的字符串。

注意：您可能希望使用 不区分大小写 修饰符 i 以使捕获更具包容性。这看起来像：

/(https?:\/\/.*\.(?:png|jpg))/i

【讨论】：

这在 src="mail.google.com/mail/u/0/images/cleardot.gif" style="background:url(ssl.gstatic.com/mail/sprites/…) 这样的情况下会失败。对我有用的是 (https?:\/\/[^ ]* \.(?:gif|png|jpg|jpeg))
我觉得这样更好：(http)?s?:?(\/\/[^"']*\.(?:png|jpg|jpeg|gif|png|svg))
是的 +1 ：例如：someurl.svg.png (wiki eg.)
尽管@Amarsh 是对的，OP 要求提供 URL，而不是通用路径，而是 URL（我认为需要有方案（例如 http:））
如果你已经解析了<img ...>标签并且想要获取src，无论它包含什么，这对我有用/src\W*=[^\'"]*([\'"])([^\1]*?)\1/ - ?在*之后意味着“非贪婪"，\W 表示非单词字符，\1 引用第一个定义的组。不要使用+ 而不是* 来获得非空 - 如果<img ...> 具有更多属性，则可能不起作用！

【解决方案2】：

聚会有点晚了，但在尝试做一些类似于 OP 的事情时，我创建了以下正则表达式，它似乎可以处理相对链接以及绝对链接：

/([a-z\-_0-9\/\:\.]*\.(jpg|jpeg|png|gif))/i

【讨论】：

这允许仅提取 url，如果它们与其他文本混合（在抓取时非常有用）
这不会提取完全包含空格的文件名

【解决方案3】：

试试这个：

/"(http://[^"]*?\.(jpg|png))"/g

$1 就是你想要的。

【讨论】：

【解决方案4】：

我几天前创建了这个正则表达式：

/^https?:\/\/.*\/.*\.(png|gif|webp|jpeg|jpg)\??.*$/gmi

这篇文章中其他人提供的有效，但不会检查查询字符串

这个正则表达式的例子：

  static checkForImage(url){
    let regex = /^https?:\/\/.*\/.*\.(png|gif|webp|jpeg|jpg)\??.*$/gmi
    let result;
    if (url.match(regex)){
      result = {
        match: url.match(regex)
      }
    } else {
      result = false;
    }
    return result;
  }
checkForImage('https://images-ext-2.discordapp.net/external/yhycJKw8ohsysnU6CBDLQPV4979oQINVmv-fRfu-jL8/%3Fsize%3D2048/https/cdn.discordapp.com/avatars/490535372393021469/a_9e9d0e575eee0221e759257e259681af.gif')

【讨论】：

恐怕您的代码无法按预期工作。例如，它也将匹配https://foo.bar/a.jpg.pdf 之类的内容，或者实际上指定扩展名之后的任何字符都将被匹配。我不是正则表达式大师，但也许这样的事情会做：^https?:\/\/.*\/.*\.(png|gif|webp|jpeg|jpg)($|\?.*$)。您可能还需要考虑添加 uri 片段 # 作为条件。

【解决方案5】：

对此的超级严格解决方案是：

/(http[s]*:\/\/)([a-z\-_0-9\/.]+)\.([a-z.]{2,3})\/([a-z0-9\-_\/._~:?#\[\]@!$&'()*+,;=%]*)([a-z0-9]+\.)(jpg|jpeg|png)/i

【讨论】：

为什么是(http[s]*://)？除了可以附加到 http 的 s 之外，还有什么其他的吗？ oO
这是因为某些服务在不支持的情况下通过 https 访问它们时行为异常，反之亦然。我遇到过更改协议解决了我的问题的情况。无论如何，它也是对其他答案给出不同的方法。
我知道，有些服务只有http，有些可能只有https。哦，我明白了，您只需使用* 而不是?，这样会更有意一些。

【解决方案6】：

var regex = /(http[s]?:\/\/.*\.(?:png|jpg|gif|svg|jpeg))/i;

这是你想要的结果

【讨论】：