食谱分量转换工具：正则匹配含空格用户输入的问题求助

问题分析 #

当前的if/else逻辑仅通过空格和斜杠判断分数类型，无法区分带空格的单分数（如「1/2 cup」）和混合分数（如「1 1/2 Cup」）——带空格的单分数会因包含空格被错误归类到混合分数分支，导致处理逻辑失效。

解决方案 #

核心思路是用正则表达式精准匹配不同分数的结构特征，替代单纯的字符包含判断；同时优化文本提取逻辑，确保只提取单位和食材名称。

1. 优化文本提取逻辑 #

原逻辑通过匹配字母和空格提取文本，可能混入数值部分的空格。改用替换操作直接剥离开头的数值，更准确：

// 提取单位和食材文本（移除开头的数值部分）
var unitAndIngredient = originalMeasurementsString.replace(/^\d+\s*\d*\/?\d*\s*/, '').trim();

// 拼接转换后数值与文本
$('#resizedMeasurements').html(resizedWholeNumber + resizedDecimal + ' ' + unitAndIngredient);

2. 重构分数类型判断逻辑 #

通过正则匹配不同分数的结构，精准区分类型：

// 匹配混合分数（结构：整数 + 空格 + 分数，如「1 1/2」）
if (/^\d+\s+\d+\/\d+/.test(originalMeasurementsString)) {
  // 混合分数处理逻辑
}
// 匹配单分数（包括「1/2」「1/2 cup」等格式）
else if (/^\d+\/\d+/.test(originalMeasurementsString)) {
  // 单分数处理逻辑
}
// 整数输入情况（如「1 Cup」）
else {
  // 整数处理逻辑
}

逻辑说明 #

• 混合分数正则/^\d+\s+\d+\/\d+/：仅匹配开头为「整数+空格+分数」的结构，避免将单分数后的空格误判为混合分数的分隔符。
• 单分数正则/^\d+\/\d+/：匹配所有以分数开头的输入，无论后续是否带空格和文本。
• 文本提取正则/^\d+\s*\d*\/?\d*\s*/：匹配开头的整数、分数（包括混合分数）及后续空格，确保剥离所有数值部分，只保留单位和食材名。

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