本文介绍使用JavaScript正则表达式动态解析HTML中带格式的文档文件名（如“-a Author -j Year.pdf”），并为作者名和出版年份分别包裹与标签，配合CSS实现蓝/绿色高亮，同时兼容仅含作者或仅含年份的边缘情况。
本文介绍使用javascript正则表达式动态解析html中带格式的文档文件名（如“-a author -j year.pdf”），并为作者名和出版年份分别包裹`
要实现对 .filename 元素内特定文本片段（作者名、出版年份）的精准着色，核心在于一次解析、多模式匹配、安全替换——而非多次覆盖 window.onload（这会导致前两次赋值被最后一次覆盖，是原问题中“只有最后一个脚本生效”的根本原因）。
以下是一个健壮、可扩展的解决方案：
✅ 推荐实现：单次遍历 + 多规则正则替换
<style>
.filename { margin-left: 4em; }
.author { color: blue; }
.year { color: green; }
</style><script>
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.filename').forEach(el => {
let html = el.innerHTML;
// 规则1：匹配 "-a AuthorName -j Year" → 高亮作者 + 年份（优先处理完整结构）
html = html.replace(/(-a\s+)([^-]+?)(\s+-j\s+)(\d{4})(?=\.[a-zA-Z0-9]+)/g,
'$1<span class="author">$2$3<span class="year">$4');
// 规则2：仅匹配 "-a AuthorName" 后紧跟 "." 或空格+点（如 "-a John Doe.pdf"）
html = html.replace(/(-a\s+)([^-\s.]+(?:\s+[^-\s.]+)*)\s*(?=\.[a-zA-Z0-9]+)/g,
'$1<span class="author">$2');
// 规则3：仅匹配 "-j Year" 后紧跟 "."（如 "-j 2023.pdf"）
html = html.replace(/(-j\s+)(\d{4})(?=\.[a-zA-Z0-9]+)/g,
'$1<span class="year">$2');
el.innerHTML = html;
});
});
</script>
? 关键说明与注意事项
- DOMContentLoaded 优于 window.onload：确保DOM就绪即执行，无需等待图片等资源加载，更及时且语义更准确。
-
正则设计兼顾鲁棒性：
- (?=\.[a-zA-Z0-9]+) 是正向先行断言，确保匹配的年份/作者后紧接 .pdf 等扩展名，避免误伤中间连字符（如 -j 2023-extra.pdf 中的 2023 仍会被捕获）。
- [^-\s.]+ 表示非连字符、非空白、非点号的连续字符，能安全匹配含空格的作者名（如 Michael Jackson）。
- 顺序很重要：先处理完整 -a ... -j ... 结构，再分别处理单独出现的 -a 或 -j，防止规则冲突（例如 -a A -j B 被拆成两段错误替换）。
- 不破坏原始HTML结构：仅对 .filename 元素的 innerHTML 进行字符串替换，保留原有标签层级（前提是原始内容不含嵌套HTML；若含，建议改用 DOM 解析方式）。
✅ 示例效果（输入 → 渲染后）
原始 HTML：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
<span class="filename">My document -a Michael Singer -j 2023.pdf</span> <span class="filename">Report -j 2008.pdf</span> <span class="filename">Notes -a Jane Austen.pdf</span>
渲染后等效于：
<span class="filename">My document -a <span class="author">Michael Singer</span> -j <span class="year">2023</span>.pdf</span> <span class="filename">Report -j <span class="year">2008</span>.pdf</span> <span class="filename">Notes -a <span class="author">Jane Austen</span>.pdf</span>
? 进阶提示：若文件名格式更复杂（如支持 -a "John Smith" 引号包裹、或存在多个 -j），建议改用 split() + 状态机解析，或引入 DOMParser 安全处理富文本。但对当前场景，上述三步正则方案已足够简洁、高效且可维护。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
