如何过滤数组中含指定尺寸的元素？解决match()匹配失效问题

咱们先理清楚你的核心需求：只拒绝那些src里包含30x30到350x350正方形尺寸的元素，其余情况（比如无尺寸字符串、长方形尺寸、超出30-350范围的正方形）都要正常接受。

原来的问题根源 #

你提到的错误（29x200被误拒、200x220被误接受），大概率是因为之前的正则或者逻辑犯了两个常见错误：

1. 没有限制尺寸是正方形：正则匹配了任何数字x数字的格式，不管两边数字是否相等，导致长方形的29x200被误判为需要拒绝的情况；
2. 范围匹配逻辑错误：要么没正确限定30-350的区间，要么逻辑搞反了（比如把"找到匹配就允许"写成了"找到匹配就拒绝"）。

正确的实现方案 #

下面是针对前端场景的解决方案（毕竟你提到了el.src，应该是DOM元素过滤）：

1. 精准匹配正方形尺寸的正则

先写一个能准确匹配30≤N≤350且NxN格式的正则：

const squareSizeRegex = /(?<!\d)(3[0-9]|[1-2]\d{2}|3[0-4]\d|350)x\1(?!\d)/i;

• (?<!\d)：负向断言，确保尺寸数字前面没有其他数字（避免误匹配比如130x130里的30x30）；
• (3[0-9]|[1-2]\d{2}|3[0-4]\d|350)：精准匹配30到350的整数：
  • 3[0-9] → 30-39
  • [1-2]\d{2} → 100-299
  • 3[0-4]\d → 300-349
  • 350 → 正好350
• x\1：确保x后面的数字和前面捕获的数字完全一致（保证是正方形）；
• (?!\d)：负向断言，确保尺寸数字后面没有其他数字（避免误匹配比如30x300）；
• i：忽略大小写，兼容X大写的情况。

2. 正确的过滤逻辑

过滤逻辑很简单：如果src中匹配到上述正则，就拒绝该元素；否则允许。代码示例：

function shouldRejectImage(el) {
  const src = el.src;
  // 匹配30x30到350x350的正方形尺寸
  const squareSizeRegex = /(?<!\d)(3[0-9]|[1-2]\d{2}|3[0-4]\d|350)x\1(?!\d)/i;
  // 存在匹配则返回true（拒绝），否则返回false（允许）
  return squareSizeRegex.test(src);
}

测试验证

用你的示例和问题场景测试：

• zxcdsa.com/photo-277590-30x24.jpeg：30≠24，无匹配 → 返回false（允许）
• zxcdsa.com/photo2-254654.png：无尺寸字符串 → 返回false（允许）
• example.com/29x200.jpeg：长方形尺寸 → 返回false（允许）
• example.com/200x220.png：长方形尺寸 → 返回false（允许）
• example.com/30x30.jpg：匹配30x30 → 返回true（拒绝）
• example.com/350x350.jpg：匹配350x350 → 返回true（拒绝）
• example.com/351x351.jpg：超出350范围 → 返回false（允许）

额外注意事项 #

• 如果你的图片尺寸前面有固定前缀（比如w30x30），可以把(?<!\d)改成(?<!\w)或者更具体的前缀匹配（比如(?<=w)）；
• 如果尺寸可能带前导零（比如030x030），可以在正则的数字部分加0?，比如(0?3[0-9]|0?[1-2]\d{2}|0?3[0-4]\d|0?350)；
• 如果你用的是其他语言（比如Python），正则的断言语法可能略有不同，但核心逻辑一致：匹配相等的数字对，且数字在30-350区间。

内容的提问来源于stack exchange，提问作者Anon