本文介绍如何在网页加载完成后，自动识别段落中类似 7/19/26 的日期字符串，并将其转换为更友好的英文格式（如 July 19th, 2026），全程基于原生 JavaScript 实现，无需依赖外部库。
本文介绍如何在网页加载完成后，自动识别段落中类似 `7/19/26` 的日期字符串，并将其转换为更友好的英文格式（如 `july 19th, 2026`），全程基于原生 javascript 实现，无需依赖外部库。
在实际项目中，后端返回的 HTML 常包含原始格式的日期（如 7/19/26 或 07/19/2026），但面向用户展示时，需提升可读性与本地化体验。以下方案使用纯 JavaScript（兼容 jQuery 环境，但不强依赖），在 DOM 加载就绪后精准定位、解析并重写含日期的 <p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11083" title="Java调试"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="Java调试" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11083" title="Java调试">Java调试</a>
<p>通过 JDWP 实现 Java 远程调试：连接远程 JVM、设置断点、单步执行代码、查看变量值、获取调用栈。适用于需要调试远程 Java 应用、排查运行时状态、追踪代码执行流程的场景。
术语注解
JDWP：Java Debug Wire Protocol，Java 调试有线协议（Java 远程调试底层通信协议）
remote JVM：远程 Java 虚拟机
step through code：代码单步调试（步入 / 步过 / 步出调试）
inspect variables：变量查看 / 变量检视
stac</p>
</div>
<a href="/xiazai/skill11083" title="Java调试" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 文本。
✅ 核心步骤说明
-
定位目标元素：遍历所有
<p></p>标签，或通过更精确的选择器（如p:contains("Meeting scheduled")配合 jQuery）缩小范围； -
正则提取日期：匹配常见美式日期格式（
M/D/Y或M/D/YY），支持 1–2 位月/日 + 2 或 4 位年； -
安全日期解析：注意
new Date("7/19/26")会被浏览器默认解释为2026年（非1926），但需确保输入格式稳定； -
生成序数词（1st, 2nd, 3rd…）：处理
11th,12th,13th等特殊规则； -
格式化替换：用
toLocaleString('default', { month: 'long' })获取完整英文月份，拼接序数日与年份。
? 完整可运行代码（推荐放在 DOMContentLoaded 或 $(document).ready() 中）
function getOrdinal(n) {
const ord = ["st", "nd", "rd"];
const exceptions = [11, 12, 13];
const suffix = (n % 10 - 1 >= 0 && n % 10 - 1 < 3 && !exceptions.includes(n % 100))
? ord[n % 10 - 1]
: "th";
return n + suffix;
}
// 确保 DOM 已加载
document.addEventListener('DOMContentLoaded', () => {
// 遍历所有 <p> 元素（可按需限定：如 document.querySelectorAll('p[data-auto-format="date"]')）
document.querySelectorAll('p').forEach(p => {
const text = p.textContent || p.innerText;
// 匹配 M/D/Y 或 M/D/YY（支持单/双位月、日，2或4位年）
const dateMatch = text.match(/\b(\d{1,2})[\/\-\.](\d{1,2})[\/\-\.](\d{2}|\d{4})\b/);
if (!dateMatch) return;
const [fullMatch, month, day, year] = dateMatch;
// 补全年份：2位年 → 转为20xx（假设2000–2099）
const fullYear = year.length === 2
? parseInt(year) + (parseInt(year) < 50 ? 2000 : 1900)
: parseInt(year);
// 构造标准日期对象（注意：Date 构造函数期望 MM/DD/YYYY）
const dateObj = new Date(fullYear, month - 1, day); // month 是 0-indexed
if (isNaN(dateObj.getTime())) return; // 解析失败则跳过
const formattedMonth = dateObj.toLocaleString('en-US', { month: 'long' });
const ordinalDay = getOrdinal(dateObj.getDate());
const formattedDate = `${formattedMonth} ${ordinalDay}, ${fullYear}`;
// 替换原文本中的原始日期（保留标点上下文）
const updatedText = text.replace(fullMatch, formattedDate);
p.innerHTML = updatedText; // 若含 HTML 标签请谨慎使用 innerHTML，优先考虑 textContent + 节点重建
});
});⚠️ 注意事项与最佳实践
-
日期鲁棒性：正则
/(\d{1,2})[\/\-\.](\d{1,2})[\/\-\.](\d{2}|\d{4})/可匹配7/19/26、07-19-2026、1.1.24等，但需避免误匹配 IP 或版本号（如192.168.1.1），建议结合上下文关键词（如"Meeting scheduled"）增强准确性； -
年份推断：
26默认转为2026，若业务涉及跨世纪数据，请根据业务逻辑调整补全规则； -
国际化扩展：如需多语言支持，将
en-US换为用户 locale，并使用Intl.DateTimeFormat进一步定制； -
性能优化：对大量
<p></p>元素，建议添加data-date-format="auto"属性作为处理开关，避免无谓遍历； -
SEO 与可访问性：原始日期仍保留在 DOM 中（仅视觉替换），如需语义化增强，可用
<time datetime="2026-07-19">July 19th, 2026</time>封装。
该方案轻量、可靠、易于集成，适用于 CMS 输出、邮件模板渲染、或遗留系统前端增强等场景。
