本文介绍使用 JavaScript 正则表达式动态识别并高亮 HTML 中文件名内特定标记（如 -a 后的作者名、-j 后的出版年份）的方法，支持不完整格式（仅含作者或仅含年份），并通过 <span> 注入语义化样式类，配合 CSS 实现蓝/绿双色精准着色。
本文介绍使用 javascript 正则表达式动态识别并高亮 html 中文件名内特定标记（如 `-a` 后的作者名、`-j` 后的出版年份）的方法，支持不完整格式（仅含作者或仅含年份），并通过 `` 注入语义化样式类，配合 css 实现蓝/绿双色精准着色。
要实现对 .filename 元素中作者名（-a 后、-j 前或句点前）与出版年份（-j 后、句点前）的智能着色，关键在于：一次遍历、多模式匹配、安全替换。原始尝试中多次覆盖 window.onload 导致仅最后脚本生效，根本原因在于函数赋值会完全替换前一个监听器；而分步正则替换还可能因 HTML 内容被修改后影响后续匹配（如已插入 <span> 会破坏原始文本结构）。
✅ 推荐方案：单次处理 + 多重正则捕获 + 非破坏性替换
我们采用一个健壮的正则表达式，同时覆盖三种常见格式：
- 完整格式：-a Author -j Year.pdf
- 仅作者：-a Author.pdf
- 仅年份：-j Year.pdf
使用 replace() 的回调函数逐个处理每个 .filename 元素的原始文本内容，并按优先级顺序匹配：
立即学习“前端免费学习笔记（深入）”；
- 优先匹配 -j <year>.（年份紧邻句点）
- 再匹配 -a <author> 后接 -j 或句点（支持空格与边界）
- 所有替换均基于原始纯文本，避免嵌套 HTML 干扰
以下是完整可运行代码（放入 <head> 中）：
<style>
.filename { margin-left: 4em; }
.author { color: blue; }
.year { color: green; }
</style>
<script>
window.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.filename').forEach(el => {
let text = el.textContent;
// 步骤1：先处理年份（-j ... .pdf），防止被作者规则截断
text = text.replace(/-j\s+([^.\s]+)(?=\.[^<]*$)/g, '-j <span class="year">$1</span>');
// 步骤2：再处理作者（-a ... 后跟空格、-j 或句点）
// 支持：-a Name -j、-a Name.、-a Name（行尾）
text = text.replace(/-a\s+([^-\s.]+(?:\s+[^-\s.]+)*)\s*(?=(?:-j|\.)|$)/g,
'-a <span class="author">$1</span>');
el.innerHTML = text;
});
});
</script>? 关键细节说明：
- 使用 window.addEventListener('DOMContentLoaded', ...) 替代 window.onload，确保 DOM 就绪即执行，且可多次调用无冲突；
- 正则中 (?=...) 是正向先行断言，匹配位置但不消耗字符，保证 .pdf 等后缀保留原样；
- \s+ 匹配任意空白（空格、制表符），增强鲁棒性；
- [^-\s.]+ 精确捕获非分隔符字符，避免误吞 -j 或句点；
- 作者正则支持多词姓名（如 Michael Jackson），通过 (?:\s+[^-\s.]+)* 实现；
- 所有替换均作用于 textContent（纯文本），再整体写回 innerHTML，逻辑清晰、无竞态。
✅ 示例输入效果对比：
原始 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 John Washington.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">John Washington</span>.pdf</span>
? 进阶建议：
- 若需支持更多字段（如 -t 标签、-v 版本），可沿用相同模式扩展；
- 对安全性要求极高时（如用户可控文件名），应先对 $1 内容做 HTML 转义（如 DOMPurify.sanitize()）；
- 如需响应式更新（例如动态插入新 .filename），可封装为函数并搭配 MutationObserver 监听。
此方案兼顾简洁性、兼容性与可维护性，无需依赖外部库，开箱即用。
