如何在 HTML 中自动为文件名中的作者和年份添加颜色高亮-html教程-PHP中文网

本文介绍使用 JavaScript 正则表达式动态识别并高亮 HTML 中文件名内特定标记（如 -a 后的作者名、-j 后的出版年份）的方法，支持不完整格式（仅含作者或仅含年份），并通过注入语义化样式类，配合 CSS 实现蓝/绿双色精准着色。

本文介绍使用 javascript 正则表达式动态识别并高亮 html 中文件名内特定标记（如 `-a` 后的作者名、`-j` 后的出版年份）的方法，支持不完整格式（仅含作者或仅含年份），并通过 `` 注入语义化样式类，配合 css 实现蓝/绿双色精准着色。

要实现对 .filename 元素中作者名（-a 后、-j 前或句点前）与出版年份（-j 后、句点前）的智能着色，关键在于：一次遍历、多模式匹配、安全替换。原始尝试中多次覆盖 window.onload 导致仅最后脚本生效，根本原因在于函数赋值会完全替换前一个监听器；而分步正则替换还可能因 HTML 内容被修改后影响后续匹配（如已插入会破坏原始文本结构）。

✅ 推荐方案：单次处理 + 多重正则捕获 + 非破坏性替换

我们采用一个健壮的正则表达式，同时覆盖三种常见格式：

完整格式：-a Author -j Year.pdf
仅作者：-a Author.pdf
仅年份：-j Year.pdf

使用 replace() 的回调函数逐个处理每个 .filename 元素的原始文本内容，并按优先级顺序匹配：

优先匹配 -j .（年份紧邻句点）
再匹配 -a 后接 -j 或句点（支持空格与边界）
所有替换均基于原始纯文本，避免嵌套 HTML 干扰

以下是完整可运行代码（放入

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

中）：

<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');

    // 步骤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');

    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>

? 进阶建议：