如何将HTML文本框的MM YYYY格式日期拆分为2个JavaScript变量用于计算？

你需要使用的计算公式如下：

12 * (2020-YYYY) + (12-MM)

你的输入框已经配置了格式校验规则，正常提交的输入内容必然是MM YYYY的结构，直接按空格拆分即可，具体操作如下：

• 读取输入框的文本值，先用trim()清除前后多余空格，再调用split(' ')方法按空格分割为数组，数组第一个元素为月份字符串，第二个为年份字符串
• 将两个字符串转换为数字类型，避免后续计算出现类型错误
• 代入给出的公式完成计算即可

代码示例 #

// 获取输入框节点
const investInput = document.getElementById('Invest');
// 拆分输入值
const [monthStr, yearStr] = investInput.value.trim().split(' ');
// 转换为数字类型
const MM = Number(monthStr);
const YYYY = Number(yearStr);
// 代入公式计算
const calcResult = 12 * (2020 - YYYY) + (12 - MM);

如果需要绑定点击事件触发计算，可以参考以下完整示例：

<p> End of Investment: <input type="text" title="Date as MM YYYY" pattern="(0[1-9]|1[012]) [0-9]{4}" id="Invest"> </p>
<button id="calcBtn">计算</button>
<p id="output"></p>

<script>
const calcBtn = document.getElementById('calcBtn');
const investInput = document.getElementById('Invest');
const output = document.getElementById('output');

calcBtn.addEventListener('click', () => {
  // 校验输入格式是否符合要求
  if (!investInput.checkValidity()) {
    output.textContent = '请输入符合MM YYYY格式的日期，例：06 2019';
    return;
  }
  const [monthStr, yearStr] = investInput.value.trim().split(' ');
  const MM = Number(monthStr);
  const YYYY = Number(yearStr);
  const result = 12 * (2020 - YYYY) + (12 - MM);
  output.textContent = `计算结果：${result}`;
})
</script>

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