JavaScript中动态替换元素背景与正则匹配

JavaScript 动态替换元素背景与正则匹配

在现代前端开发中，我们常常需要让页面具备“感知上下文”的能力——比如根据日志关键词自动调整 UI 状态。这种轻量级的智能行为并不依赖复杂的机器学习模型，而是通过巧妙的 DOM 操作和正则表达式实现。

下面这个脚本就用于 ms-swift 的 Web 控制台界面中：它能动态识别训练任务的状态标签，并基于日志内容自动更换背景图，从而实现视觉化提示。整个过程完全在浏览器端完成，无需后端介入，响应迅速且易于维护。

该方案已在 Chrome 120+ 和 Firefox 118+ 上验证可用，适用于预训练、微调、推理、评测等多种场景。

核心逻辑入口：updateTrainingStatusIndicators

脚本通过setTimeout(..., 0)延迟执行主函数，确保 DOM 加载完毕后再进行操作。这是一种简单但有效的防错机制，尤其适合注入式脚本或用户脚本（如 Tampermonkey）环境。

setTimeout(updateTrainingStatusIndicators, 0); function updateTrainingStatusIndicators() { //--- 判断当前页面类型：是否为训练任务页或评估页？ var path = location.pathname; var pathSegments = path.split("/").filter(Boolean); // 去除空串 if (pathSegments.includes("training") || pathSegments.includes("finetune")) { processStatusElements(true); } else if (pathSegments.includes("evaluation") || pathSegments.includes("inference")) { processStatusElements(false); } else { console.warn("[StatusUI] 当前路径未匹配任何受控页面类型:", path); } }

这里的关键是路径解析。使用split("/")并过滤空字符串可以安全处理以/开头或结尾的 URL。随后根据路径关键字判断当前页面类型，决定后续选择器策略。

经验提示：不要用indexOf或硬编码索引判断路径层级，因为路由结构可能变化。采用includes匹配关键语义词更健壮。

分支处理：不同页面结构的适配

由于训练页和推理页的 DOM 结构不同，我们需要分别处理：

function processStatusElements(isTrainingPage) { var statusNodes; if (isTrainingPage) { // 训练页使用较深层级的选择器 statusNodes = document.querySelectorAll(".task-card .status-icon"); } else { // 推理页结构扁平 statusNodes = document.querySelectorAll(".status-icon"); } for (var i = statusNodes.length - 1; i >= 0; i--) { var node = statusNodes[i]; var logText; if (isTrainingPage) { // 日志文本藏于>