如何用JavaScript为HTML文件名中的作者与年份添加指定颜色

问题分析 #

你遇到的核心问题是多次赋值window.onload会覆盖之前的函数，所以只有最后一个处理年份的逻辑生效。同时你的正则匹配规则不够完善，无法兼容「有作者有年份」「仅作者」「仅年份」三种文件名格式。

完整实现代码 #

<!DOCTYPE html>
<html>
<head>
    <style>
        .filename { 
            margin-left: 4em;
            display: block; /* 可选：让每个文件名单独一行显示 */
        }
        .author { color: blue; }
        .year { color: green; }
    </style>
    <script>
        window.onload = function() {
            // 遍历所有带filename类的元素
            document.querySelectorAll('.filename').forEach(elem => {
                let text = elem.textContent;
                
                // 匹配并替换作者部分：兼容作者后接年份或直接到.pdf的情况
                text = text.replace(/-a ([^-.]+)(?= -j|\.pdf)/g, '-a <span class="author">$1</span>');
                
                // 匹配并替换年份部分：精准匹配-j后的数字年份
                text = text.replace(/-j (\d+)(?=\.pdf)/g, '-j <span class="year">$1</span>');
                
                elem.innerHTML = text;
            });
        };
    </script>
</head>
<body>
    <span class="filename">My document -a Michael Singer -j 2023.pdf</span>
    <span class="filename">My document -j 2008.pdf</span>
    <span class="filename">My document -a John Washington.pdf</span>
</body>
</html>

关键说明 #

1. 合并window.onload函数：把所有处理逻辑放在同一个window.onload回调里，避免后续赋值覆盖之前的函数。
2. 优化正则匹配规则：
   • 作者匹配：/-a ([^-.]+)(?= -j|\.pdf)/g 精准匹配-a 后的作者名，直到遇到 -j或.pdf停止，兼容两种结尾场景。
   • 年份匹配：/-j (\d+)(?=\.pdf)/g 匹配-j 后的数字年份，确保只替换年份部分。
3. 保留原始文件名结构：仅对需要高亮的作者和年份添加<span>标签，不破坏文件名的整体格式。

内容的提问来源于stack exchange，提问作者Singermichael