使用 javascript 正则表达式匹配 javascript 内的图像路径

Question

我需要一个正则表达式来扫描 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中正则表达式的形式如何？

Answer 1

在 Javascript 中不支持所有格量词 ++ 和原子组 (?>。

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

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

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

注意转义 \/，因为 Javscript 中的正则表达式定界符是 /，您不必转义字符中的 ' 和 " class.

较短的版本可能看起来像

[^"']+\.(?:(?: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]));

Answer 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

使用 javascript 正则表达式匹配 javascript 内的图像路径

Matching image path inside javascript using javascript regex

javascript

regex

regex-negation

regex-group

ecmascript-6