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

Question

我正在使用 Javascript regEx 来解析图像 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 标签替换，图像按预期显示在输出流中。

然而，我被抛在了脑后。

我注意到一些 url（特别是来自 Facebook CDN 的那些——尽管我认为其他人也可以这样做）在图像类型之后附加了一大堆“东西”......如果不存在的东西会导致文件不可用，并生成丢失的图像图标。例如，这是来自 fbcdn.net 的有效图片网址：

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

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

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

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

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

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

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 中是一个坏主意，文章“点星之死！ ”很好地说明了这一点。改用否定字符类，这里我选择了“\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上试试