如何用JavaScript在WordPress中提取图片URL里的尺寸值（正则求解）

别担心，刚接触正则确实容易摸不着头脑，我来帮你搞定这个问题！针对WordPress这种文件名-宽度x高度.后缀的缩略图命名规则，我们可以用正则表达式精准提取出尺寸部分。

方法一：使用捕获组提取 #

这是最直观的方式，通过正则捕获我们需要的尺寸内容：

// 示例图片URL
const imageUrl = 'wp-content/uploads/2018/04/image-300x200.jpg';
// 匹配"-数字x数字."的正则，括号内是我们要捕获的尺寸
const sizeRegex = /-(\d+x\d+)\./;
// 执行匹配
const matchResult = imageUrl.match(sizeRegex);

// 判断是否匹配成功
if (matchResult) {
  const imageSize = matchResult[1]; // 捕获组1就是我们要的尺寸
  console.log(imageSize); // 输出: 300x200
} else {
  console.log('未找到符合格式的图片尺寸');
}

正则解释：

• -：匹配尺寸前面的连字符
• (\d+x\d+)：捕获组，\d+匹配1个或多个数字，x匹配字面量的x，整体匹配数字x数字的格式
• \.：匹配尺寸后面的点（文件后缀的开头）

方法二：使用零宽断言直接匹配（更简洁） #

如果不想处理捕获组，可以用正向断言直接定位到尺寸部分，这样匹配结果直接就是我们要的内容：

const imageUrl = 'wp-content/uploads/2018/04/my-complex-filename-600x400.png';
// 用断言确保前后是连字符和点，中间匹配尺寸格式
const sizeRegex = /(?<=-)\d+x\d+(?=\.)/;
// 可选链操作符避免匹配失败时报错
const imageSize = imageUrl.match(sizeRegex)?.[0];

console.log(imageSize); // 输出: 600x400

正则解释：

• (?<=-)：正向回顾后发断言，确保当前位置前面是一个连字符（但不会把连字符包含在匹配结果里）
• \d+x\d+：匹配数字x数字的尺寸格式
• (?=\.)：正向前瞻断言，确保当前位置后面是一个点（同样不会把点包含在匹配结果里）

这种方法即使文件名本身包含多个连字符，也能准确找到最后那个对应尺寸的部分，适用性更强。

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