使用 javascript 正则表达式匹配 javascript 中的图像路径答案

【问题标题】：Matching image path inside javascript using javascript regex使用 javascript 正则表达式匹配 javascript 中的图像路径
【发布时间】：2021-05-09 23:17:27
【问题描述】：

我需要一个正则表达式来扫描 JS 文件以查找它找到的任何图像路径。

这些路径通常嵌套如下：

$img1 = "foo/bar.png";
$img2 = 'foo/bar.jpg';
$img3 = "{'myimg':'foo/bar.png'}";

我需要一个正则表达式，它能够获取引号内的整个图像路径，但有时嵌套在 json 字符串中，或者以其他方式编码...本质上，通过检测是否存在来匹配整个图像路径扩展名 (jpg|png|gif)。

我有 found 一个在 php 中运行良好的正则表达式，我需要一个适用于 javascript 的正则表达式。

$pattern = '~/?+(?>[^"\'/]++/)+[^"\'\s]+?\.(?>(?>pn|jpe?)g|gif)\b~';

javascript中regex模式的形式如何？

【问题讨论】：

可能排除匹配引号[^"']*\.(?:(?:pn|jpe?)g|gif)\bregex101.com/r/750x5s/1

标签： javascript regex ecmascript-6 regex-group regex-negation

【解决方案1】：

Javascript 不支持占有量词 ++ 和原子组 (?>。

更新后的模式可能如下所示：

\/?(?:[^"'/]+\/)+[^"'\s]+?\.(?:(?:pn|jpe?)g|gif)\b

但要获得这些匹配项，并且如果路径中的 // 也可以，您可以仅使用否定字符类 [^"']* 排除匹配引号

注意转义\/，因为Javscript 中的正则表达式分隔符是/，并且您不必转义字符类中的' 和"。

较短的版本可能看起来像

[^"']+\.(?:(?:pn|jpe?)g|gif)\b

[^"']+ 匹配除 ' 或 " 之外的任何字符 1 次以上
\.匹配一个点
(?:非捕获组
- (?:pn|jpe?)g 匹配 png jpg 或 jpeg
- |或者
- gif 字面匹配
)\b关闭非捕获组，后跟单词边界

Regex demo

const regex = /[^"']+\.(?:(?:pn|jpe?)g|gif)\b/;
[
  "foo/bar.png",
  "foo/bar.jpg",
  "{'myimg':'foo/bar.png'}"
].forEach(s => console.log(s.match(regex)[0]));

【讨论】：

【解决方案2】：

我会使用

string.match(/[^"'<>]+\.(?:png|jpe?g|gif)\b/gi)

见proof。注意：g - 所有出现，i - 不区分大小写，<> 添加到表达式以限制匹配到一个标签。

说明

--------------------------------------------------------------------------------
  [^"'<>]+                 any character except: '"', ''', '<', '>'
                           (1 or more times (matching the most amount
                           possible))
--------------------------------------------------------------------------------
  \.                       '.'
--------------------------------------------------------------------------------
  (?:                      group, but do not capture:
--------------------------------------------------------------------------------
    png                      'png'
--------------------------------------------------------------------------------
   |                        OR
--------------------------------------------------------------------------------
    jp                       'jp'
--------------------------------------------------------------------------------
    e?                       'e' (optional (matching the most amount
                             possible))
--------------------------------------------------------------------------------
    g                        'g'
--------------------------------------------------------------------------------
   |                        OR
--------------------------------------------------------------------------------
    gif                      'gif'
--------------------------------------------------------------------------------
  )                        end of grouping
--------------------------------------------------------------------------------
  \b                       the boundary between a word char (\w) and
                           something that is not a word char

【讨论】：