JS forEach遍历DOM日期节点时出现Invalid Date如何解决

• new Date() 对日期字符串的解析没有统一的跨环境标准：ECMAScript 规范仅要求引擎原生支持ISO 8601格式（形如YYYY-MM-DDTHH:mm:ss.sssZ）的日期解析，所有非标准格式、带本地化语言内容的日期字符串，能否解析成功完全取决于当前JS引擎的内置实现，没有兼容性保证。你代码里传入的是波兰语格式日期，月份为波兰语拼写（maja、czerwca、marca、lipca均为波兰语月份属格形式），大部分环境无法识别这类拼写，返回Invalid Date是符合预期的。
• 你通过innerHTML获取节点内容时，容易把元素内的隐藏标签、换行、不可见空白字符一并取到，进一步导致字符串和预期格式不符，提升解析失败概率。
• 你观察到的“仅1个日期解析正常”属于环境实现的巧合：当前运行环境的内置解析逻辑碰巧匹配到了某一条日期的格式/拼写，不代表当前写法是正确可复用的。

运行效果 #

复现代码 #

const blocksDate = document.querySelectorAll(".roadmap__time");
blocksDate.forEach((block) => {
  const dateString = block.innerHTML;
  const dateBlock = new Date(dateString);
  const currentDate = new Date();
  console.log(dateBlock);
});

<span class="roadmap__time">1 maja, 2022</span>
<span class="roadmap__time">16 czerwca, 2022</span>
<span class="roadmap__time">3 marca, 2022</span>
<span class="roadmap__time">3 lipca 2022</span>
<span class="roadmap__time">9 lipca 2021</span>

• 获取节点纯文本优先使用textContent替代innerHTML，拿到内容后先调用trim()清除首尾不可见空白，避免无关字符干扰解析。
• 永远不要依赖new Date()解析非标准、本地化的日期字符串，两种可选处理方式：
  • 手动做本地化月份映射，拆分字符串后传入Date构造函数的多参数形式（多参数形式的解析行为是跨环境统一的），示例代码：

  // 波兰语月份与Date构造函数所需月份下标的映射（月份从0开始计数）
  const plMonthMap = {
    stycznia: 0,
    lutego: 1,
    marca: 2,
    kwietnia: 3,
    maja: 4,
    czerwca: 5,
    lipca: 6,
    sierpnia: 7,
    września: 8,
    października: 9,
    listopada: 10,
    grudnia: 11
  }
  const blocksDate = document.querySelectorAll(".roadmap__time");
  blocksDate.forEach((block) => {
    // 清除空白、移除日期里多余的逗号分隔符
    const dateStr = block.textContent.trim().replaceAll(',', '');
    const [day, monthName, year] = dateStr.split(/\s+/);
    // 多参数传参的Date构造行为是标准统一的，不会出现解析差异
    const dateBlock = new Date(Number(year), plMonthMap[monthName], Number(day));
    console.log(dateBlock);
  });
  

  • 如果项目存在大量多语言日期解析需求，直接引入dayjs/date-fns这类成熟日期工具库，加载对应语言包后做解析，不用自行维护月份映射表，避免漏匹配。

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