JavaScript日期排序分组教程详解

本文手把手教你用纯 JavaScript 实现对含英文自然语言日期（如“Monday, April 10th”）的复选框列表进行零侵入、高性能的全局升序排序与智能月度分组——无需修改 HTML 结构、不依赖 data 属性或后端支持，通过预解析缓存、单次稳定排序和动态标题插入，兼顾健壮性、可访问性与生产可用性，轻松将杂乱日程列表转化为清晰美观、语义化的归档视图。

本文详解如何在不修改 HTML 结构的前提下，使用纯 JavaScript 对含英文日期文本（如 “Monday, April 10th”）的复选框列表进行全局日期升序排序，并自动插入月度标题实现视觉化分组。

本文详解如何在不修改 HTML 结构的前提下，使用纯 JavaScript 对含英文日期文本（如 “Monday, April 10th”）的复选框列表进行**全局日期升序排序**，并自动插入月度标题实现视觉化分组。

在实际前端开发中，常需对动态生成或 CMS 输出的日期型列表（如活动日程、归档条目）进行逻辑排序与结构化呈现。但当日期仅以自然语言形式嵌入 DOM 文本（而非 data-date 属性或 ISO 格式）时，直接解析易出错——尤其面对 April 10th 这类带序数词（st/nd/rd/th）的格式。本文提供一套健壮、可维护的解决方案，无需后端配合或 HTML 改动，兼顾性能与可读性。

✅ 核心思路：预解析 + 单次排序 + 动态分组渲染

不同于原代码中“先全局排序 → 再按月拆分 → 再逐月二次排序 → 最后拼接”的冗余流程，我们采用更高效的策略：

• 预解析：遍历所有
• ，一次性提取并缓存其对应 Date 对象与月份名，避免重复正则与 new Date() 调用；
• 单次排序：基于预存的 .date 属性直接排序，时间复杂度 O(n log n)，稳定可靠；
• 动态分组：排序后遍历渲染，检测当前项月份是否变化，动态插入

  月标题，实现语义化分组。

? 关键工具函数：安全解析英文日期字符串

function str2date(dateStr) {
  // 示例输入："Monday, April 10th" → 提取 "April" 和 "10"
  const cleanStr = dateStr.slice(0, -2); // 移除末尾 "th"/"st" 等
  const parts = cleanStr.split(/,?\s+/);   // 按逗号或空格分割
  const month = parts[1] || '';            // 第二项为月份（"April"）
  const day = parts[2] || '';              // 第三项为数字（"10"）

  // 构造标准日期字符串（年份固定为 2023；若需支持跨年，请结合业务逻辑动态推算）
  const dateObj = new Date(`${day} ${month} 2023`);

  // 验证解析有效性（防止 NaN Date）
  if (isNaN(dateObj.getTime())) {
    console.warn(`无法解析日期字符串: "${dateStr}"，跳过该项`);
    return [new Date(0), 'Invalid'];
  }

  return [dateObj, month];
}

⚠️ 注意事项：

• 年份 2023 是占位符。若数据可能跨越多年（如 2022–2024），建议从上下文推断年份（例如取当前年、或从其他字段提取），或改用相对时间处理（如 Date.now() 偏移）。
• slice(0,-2) 安全移除序数后缀；正则 /[,?\s+]/ 兼容 "Monday, April 10th" 和 "April 10th" 两种格式。

? 主执行函数：排序 + 分组渲染一体化

function sortAndGroupByMonth() {
  const list = document.querySelector('.faceted-filter-group-display__list');
  if (!list) return;

  const liElements = Array.from(list.querySelectorAll('.faceted-filter-group-display__list-item'));

  // 步骤 1：预解析，挂载 .date 和 .mon 属性
  liElements.forEach(li => {
    const textEl = li.querySelector('.faceted-filter-group-display__list-item-label-text');
    if (!textEl) return;

    const [date, month] = str2date(textEl.textContent);
    li.date = date;
    li.mon = month;
  });

  // 步骤 2：按日期升序排序（稳定排序，相同日期保持原始顺序）
  liElements.sort((a, b) => a.date - b.date);

  // 步骤 3：清空列表，重新渲染（含月标题）
  list.innerHTML = '';
  let currentMonth = '';

  liElements.forEach(li => {
    // 若月份变更，插入 <h3> 月标题
    if (li.mon && li.mon !== currentMonth) {
      const monthHeader = document.createElement('h3');
      monthHeader.className = 'faceted-filter-group-month-header';
      monthHeader.textContent = li.mon;
      list.appendChild(monthHeader);
      currentMonth = li.mon;
    }
    list.appendChild(li);
  });
}

// 页面加载完成后执行（或绑定到按钮点击事件）
document.addEventListener('DOMContentLoaded', sortAndGroupByMonth);
// 或：document.querySelector('#sort-btn').addEventListener('click', sortAndGroupByMonth);

? 渲染效果示例（HTML 输出片段）

执行后，原始

将被重构成如下结构：

<ul class="faceted-filter-group-display__list">
  <h3>April</h3>
  <li class="faceted-filter-group-display__list-item">...</li> <!-- April 1st -->
  <li class="faceted-filter-group-display__list-item">...</li> <!-- April 10th -->
  <h3>May</h3>
  <li class="faceted-filter-group-display__list-item">...</li> <!-- May 5th -->
  <li class="faceted-filter-group-display__list-item">...</li> <!-- May 22nd -->
</ul>

CSS 可轻松定制标题样式（如添加分割线、字体加粗、上边距等），实现专业级归档视图。

✅ 优势总结

特性	说明
零侵入	无需修改现有 HTML，不依赖 data-* 属性
高性能	预解析避免重复计算；单次 DOM 重排（innerHTML = '' + appendChild）比多次 insertBefore 更高效
健壮容错	内置 isNaN(date.getTime()) 检查，异常日期不中断流程
语义清晰	使用 作为分组标题，符合无障碍（a11y）与 SEO 最佳实践
易于扩展	如需“年+月”两级分组，仅需修改 str2date 返回年份，并在渲染逻辑中增加年标题判断

? 提示：若需支持多语言日期（如中文“四月十日”），请替换 str2date 中的月份映射表，或集成 Intl.DateTimeFormat 进行逆向解析。

通过本方案，你将获得一个简洁、可靠、生产就绪的日期排序与分组模块，可直接集成至任何基于自然语言日期文本的前端列表组件中。

本篇关于《JavaScript日期排序分组教程详解》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！

您即将跳转至第三方网站，请注意保护好个人信息和财产安全！
继续访问