如何创建匹配图片alt文本中两个属性的正则函数？

完全可以实现你的需求，不过现有代码存在几处问题，下面是修正后的完整实现：

现有代码的问题 #

• 正则表达式写法错误：${property}: (.+)[]] 属于无效语法，无法正确匹配目标属性值
• getMatchingImage参数定义混乱，类型标注错误，且仅检查属性是否存在，未验证属性值是否匹配目标值
• 缺少对提取值的合法性校验，无法确保提取的是你指定的有效值（比如size只能是0/8/16，crop只能是指定的三个值）

修正后的代码 #

// 提取指定属性值并验证是否为合法值
function getImageProperty(image, property) {
  // 定义各属性的合法值与匹配正则
  const propertyConfigs = {
    size: {
      regex: /size: (0|8|16)/,
      validValues: new Set(['0', '8', '16'])
    },
    crop: {
      regex: /crop: (full body|mid crop|close crop)/,
      validValues: new Set(['full body', 'mid crop', 'close crop'])
    }
  };

  const config = propertyConfigs[property];
  if (!config) return null;

  const match = image.altText.match(config.regex);
  // 验证匹配到的值是否在合法列表中
  return match && config.validValues.has(match[1]) ? match[1] : null;
}

/**
 * 返回匹配指定size和crop的产品图片
 * @param {Array} images - 图片数组
 * @param {string} targetSize - 目标size值（0/8/16）
 * @param {string} targetCrop - 目标crop值（full body/mid crop/close crop）
 * @returns {Object|null} 匹配的图片对象或null
 */
const getMatchingImage = (images, targetSize, targetCrop) => {
  return images.find(image => {
    const imageSize = getImageProperty(image, 'size');
    const imageCrop = getImageProperty(image, 'crop');
    // 严格匹配目标size和crop值
    return imageSize === targetSize && imageCrop === targetCrop;
  }) || null;
};

代码说明 #

1. 属性提取与校验：针对size和crop分别定义精准的正则表达式，确保只匹配你指定的有效值，避免提取到无关内容
2. 匹配逻辑：getMatchingImage会遍历图片数组，严格对比每张图片提取到的size和crop值与目标值，返回第一个完全匹配的图片
3. 鲁棒性：如果传入的属性名不合法、alt文本无匹配内容或值不在合法列表中，都会返回null，避免错误数据干扰

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