javascript 正则表达式在字符串中查找图像 url

Question

我正在使用 Javascript 正则表达式来解析图像 url 的数据库字段并将它们格式化以输出 - 到目前为止，我一直在使用

input = input.replace(/(https?:\/\/.*?\.(?:png|jpe?g|gif)(.*))(\w|$)/ig, "<br><img style='max-width:100%;overflow:hidden;' src='$1'>");

它一直很好地为我服务。所有 png、jpe?g 和 gif 引用都被 IMG 标记替换，并且图像按预期显示在输出流中。

但是，我被抛出了一个循环。

我注意到一些网址（尤其是来自 Facebook CDN 的网址 - 尽管我认为其他人也可能这样做）在图像类型之后附加了一大堆“东西”......如果不存在结果的东西在文件不可用的情况下，会产生丢失的图像图标。例如，这是来自 fbcdn.net 的有效图片 url：

https://scontent-lga1-1.xx.fbcdn.net/hphotos-xtf1/v/t1.0-9/11147160_10156300867440377_5455334309678688318_n.jpg?oh=916e68ac2c908bbe15961825c373d6bc&oe=5606B6F4

有人可以建议对正则表达式进行更改/改进以获取额外的尾随字符吗？或者是否需要另一种攻击方法

（我个人喜欢全局正则表达式，因为我可以一次确定流中的所有实例......不必手动解析流不是我所期待的......）

更新：我知道请求中有一些含糊不清 - 希望这会澄清。

我需要提取任何图像 url - 无论图像扩展后的“东西”如何。它可能是文本字符串中的第一项，也可能是最后一项，或者嵌入在中间的某个位置。

处理是在 Javascript 中完成的。我目前正在使用它作为我的有效性测试。其中的所有图片都是从 Google 图片搜索中提取的有效 url。

http://well-being.esdc.gc.ca/misme-iowb/auto/diagramme-chart/stg2/c_4_21_6_1_eng.png?20150508104424447 This is arbitrary text https://scontent-lga1-1.xx.fbcdn.net/hphotos-xtf1/v/t1.0-9/11147160_10156300867440377_5455334309678688318_n.jpg?oh=916e68ac2c908bbe15961825c373d6bc&oe=5606B6F4 this is arbitrary text

http://lh6.ggpht.com/-1Rua79J-EDo/TwuyZkHwcmI/AAAAAAAADvA/ENfg1TeayvU/type_catalog_error_thumb%25255B1%25255D.jpg?imgmax=800 this is arbitrary text http://image.slidesharecdn.com/top5thingstodoafteranaccident-140826163850-phpapp02/95/top-five-things-to-do-after-any-type-of-accident-causing-injury-1-638.jpg?cb=1409089267

希望这对我可能遇到的变化类型有足够的了解（我唯一确定的是 FBCDN - 我的其他人基于我在外面看到的其他知识......所以需要通用的解决方案，而不是特定于 FBCDN 的解决方案）。

感谢所有提供建议的人......

Answer 1

在 OP 更新后更新了更多示例输入。

您的尝试存在三个问题：匹配边界、使用 '.*' 和缺少合法后缀的模式。

点星符号在 RegEx 中是个坏主意，文章“Death to Dot Star!”很好地说明了这一点。改用否定字符类，这里我选择了“\S*?”这是“任何不是空格的字符”。如果您尝试将其替换为“。*？”而在regex101 上，您会看到它无法正确匹配（它包含一个不是图像的链接）。

由于它们都在同一个字符串中，因此必须为匹配定义边界，并且由于空格足够，“\b”可以很好地解决问题。这也消除了对“(.*)”和“(\w|$)”部分的需要。

您最后错过的是 url 的合法结尾，对此有两种解决方案：定义您认为合理的内容以包含大多数场景并且没有误报，或者包含任何内容但有机会获得结果太多。

将它们组合在一起，您将得到以下两种不同的方法：

解决方案 1 - 定义什么是正确的

\b(https?:\/\/\S*?\.(?:png|jpe?g|gif)
  # allowed postfixes to the filetype
  (?:\?(?:
    # alphnumeric key/value pairs
    (?:(?:[\w_-]+=[\w_-]+)(?:&[\w_-]+=[\w_-]+)*)|
    # alphnumeric postfix
    (?:[\w_-]+)
  ))?
)\b

在regex101尝试一下

解决方案 2 - 使用空格作为唯一因素

\b(https?:\/\/\S+(?:png|jpe?g|gif)\S*)\b

试试regex101