本文详解如何通过单次 window.onload 事件统一处理多个正则匹配规则，避免重复赋值覆盖问题，实现对文件名中作者（-a）、年份（-y）、学科（-s）、机构（-o）等标记内容的精准着色。
本文详解如何通过单次 `window.onload` 事件统一处理多个正则匹配规则，避免重复赋值覆盖问题，实现对文件名中作者（-a）、年份（-y）、学科（-s）、机构（-o）等标记内容的精准着色。
在 HTML 文档中对动态文本（如带元数据标记的文件名）进行结构化着色时，常见误区是为每种匹配模式单独声明 window.onload——这会导致后定义的函数完全覆盖前一个，最终仅最后一次注册生效。正确做法是将所有正则替换逻辑合并至单一事件处理器中，按顺序逐次处理原始文本，并累积更新 DOM 内容。
以下是一个健壮、可扩展的解决方案，支持 -a（作者）、-y（年份）、-s（知识领域）、-o（机构）四类标记，兼顾多种终止边界（如 -、.、<br> 或行尾）：
<!DOCTYPE html>
<html>
<head>
<title>My files</title>
<style>
.filename { margin-left: 4em; font-family: monospace; }
.author { color: blue; font-weight: bold; }
.year { color: green; font-weight: bold; }
.science { color: grey; font-weight: bold; }
.orga { color: purple; font-weight: bold; }
body { font-size: 1.2em; line-height: 1.6; }
</style>
</head>
<body>
<span class="filename">My document 1 -a Chris Drake -y 2021.pdf</span><br>
<span class="filename">My document 2 -a John Miller.txt</span><br>
<span class="filename">My document 3 -s Microbiology -a Peter Stone.html</span><br>
<span class="filename">My document 4 -o University of California -y 2017-08-31.mp4</span><br>
<span class="filename">Report -s Physics -o CERN -a Alice Wong -y 2023.pdf</span><br>
<script>
window.onload = function() {
document.querySelectorAll('.filename').forEach(elem => {
let text = elem.textContent;
// 优先匹配更具体的多字符分隔符（避免被短模式误截）
// -a 后内容：终止于 '-', '.', 空格+非字母数字（如 '.pdf' 前），或行尾
text = text.replace(/-a ([^-\.\s]+(?:\s+[^-\.\s]+)*)/g, '-a <span class="author">$1</span>');
// -y 年份：匹配 4 位数字（支持 2023 或 2017-08-31 中的 2017）
text = text.replace(/-y (\d{4})/g, '-y <span class="year">$1</span>');
// -s 学科：同 -a 规则，但用 .science 类
text = text.replace(/-s ([^-\.\s]+(?:\s+[^-\.\s]+)*)/g, '-s <span class="science">$1</span>');
// -o 机构：同上，使用 .orga 类
text = text.replace(/-o ([^-\.\s]+(?:\s+[^-\.\s]+)*)/g, '-o <span class="orga">$1</span>');
// ⚠️ 关键：一次性写入 innerHTML，避免多次重绘与状态丢失
elem.innerHTML = text;
});
};
</script>
</body>
</html>✅ 核心要点说明：
- 单入口原则：所有逻辑封装于一个 window.onload 回调内，杜绝事件覆盖；
- 正则设计技巧：使用 ([^-\.\s]+(?:\s+[^-\.\s]+)*) 匹配不含分隔符的连续单词（含空格分隔的多词名称），比 (.*?) 更精准，避免贪婪截断；
- 执行顺序敏感：先处理 -a/-s/-o 等可能含空格的字段，再处理 -y（纯数字），防止数字被提前捕获；
- CSS 类复用：通过语义化 class 名（.author, .year）解耦样式与逻辑，便于后期维护；
- 性能与安全：textContent → innerHTML 转换仅发生一次，且输入为静态文档内容，无 XSS 风险。
? 进阶建议：若需支持更多标记（如 -j 期刊、-v 卷号），只需新增对应 replace() 行；如需兼容大小写（-A / -Y），可在正则中加入 i 标志（如 /(-a|-A) (.*?)(?=[\.\-]|$)/gi）。始终确保正则以 g 全局标志运行，以匹配同一元素中多次出现的标记。
立即学习“Java免费学习笔记（深入）”；
