本文详解如何在不修改 HTML 结构的前提下，使用纯 JavaScript 对含英文日期文本（如 “Monday, April 10th”）的复选框列表进行全局日期升序排序，并自动插入月度标题实现视觉化分组。
本文详解如何在不修改 html 结构的前提下，使用纯 javascript 对含英文日期文本（如 “monday, april 10th”）的复选框列表进行**全局日期升序排序**，并自动插入月度标题实现视觉化分组。
在实际前端开发中，常需对动态生成或 CMS 输出的日期型列表（如活动日程、归档条目）进行逻辑排序与结构化呈现。但当日期仅以自然语言形式嵌入 DOM 文本（而非 data-date 属性或 ISO 格式）时，直接解析易出错——尤其面对 April 10th 这类带序数词（st/nd/rd/th）的格式。本文提供一套健壮、可维护的解决方案，无需后端配合或 HTML 改动，兼顾性能与可读性。
✅ 核心思路：预解析 + 单次排序 + 动态分组渲染
不同于原代码中“先全局排序 → 再按月拆分 → 再逐月二次排序 → 最后拼接”的冗余流程，我们采用更高效的策略：
- 预解析：遍历所有 <li>，一次性提取并缓存其对应 Date 对象与月份名，避免重复正则与 new Date() 调用；
- 单次排序：基于预存的 .date 属性直接排序，时间复杂度 O(n log n)，稳定可靠；
- 动态分组：排序后遍历渲染，检测当前项月份是否变化，动态插入 <h3> 月标题，实现语义化分组。
? 关键工具函数：安全解析英文日期字符串
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> 将被重构成如下结构：
立即学习“Java免费学习笔记（深入）”；
<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()) 检查，异常日期不中断流程 |
| 语义清晰 | 使用 <h3> 作为分组标题，符合无障碍（a11y）与 SEO 最佳实践 |
| 易于扩展 | 如需“年+月”两级分组，仅需修改 str2date 返回年份，并在渲染逻辑中增加年标题判断 |
? 提示：若需支持多语言日期（如中文“四月十日”），请替换 str2date 中的月份映射表，或集成 Intl.DateTimeFormat 进行逆向解析。
通过本方案，你将获得一个简洁、可靠、生产就绪的日期排序与分组模块，可直接集成至任何基于自然语言日期文本的前端列表组件中。
