必须从日志原始文本中用正则（如/\b(ERROR|WARN|INFO|FATAL)\b/i）精准提取告警级别，结合TreeWalker遍历文本节点、实体转义后包裹span高亮，禁用innerHTML.replace，流式日志需增量处理并节流。
告警级别（如 ERROR、WARN、FATAL）不能靠 CSS 类名“猜”着加，必须从日志行原始文本中准确提取并结构化处理——否则高亮会错位、漏匹配，甚至把普通单词当告警级别渲染。
怎么从纯文本日志行里可靠提取告警级别
日志格式千差万别，但真实场景中绝大多数遵循「时间戳 + 级别 + 消息」的模式。不能依赖固定分隔符（比如空格），因为消息体里可能含空格、制表符甚至 JSON 字段。
- 优先用正则锚定结构：例如
/\b(ERROR|WARN|INFO|DEBUG|FATAL)\b/i，\b保证匹配完整单词，避免把WARNING错判为WARN - 若日志带前缀（如
[ERROR]或level=ERROR），正则应适配：/\[?(ERROR|WARN|INFO|FATAL)\]?(?=\s|$)/i - 匹配后立即用
String.prototype.replace()包裹，而非拼接 HTML 字符串——防止 XSS 和标签错包 - 对匹配内容做 HTML 实体转义：
ERROR→ERROR，再包裹进<span class="log-level log-level-error"></span>
为什么不能用 innerHTML.replace() 直接全局替换
直接对整个日志容器的 innerHTML 调用 replace() 是最常见也最危险的做法。它会破坏 DOM 结构，尤其在以下情况：
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 日志行里含未闭合标签（如
<div>failed to load），<code>replace()会把当作标签起始，导致后续解析错乱 <li>用户输入含 <code>.、?、[等正则元字符，不转义就进new RegExp()会抛错 - 匹配跨多行时（如堆栈跟踪中的
Caused by: java.lang.NullPointerException），g标志失效或边界错乱 - 中文无空格分隔（如
用户登录失败ERROR重试三次），\b失效，ERROR可能被包进“失败ERROR重试”里 - 对每个
node.textContent执行级别正则匹配，跳过空/纯空白节点 - 每次匹配成功后，用
document.createElement('span')创建高亮元素，设置className和textContent，再调用node.parentNode.replaceChild() - 替换后立即执行
node.parentNode.normalize()，合并相邻文本节点，避免重复高亮 - 级别类名统一用
log-level-error、log-level-warn等，CSS 控制颜色、背景、字体粗细
如何安全地只高亮文本节点里的级别词
和页面内搜索同理，必须绕过 HTML 标签，只操作 Node.TEXT_NODE。日志查看器通常用 <pre class="brush:php;toolbar:false;"></pre> 或 <div class="log-output"> 容纳内容，这时应：<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>用 <code>document.createTreeWalker(container, NodeFilter.SHOW_TEXT, null, false) 遍历所有文本节点
WebSocket/SSE 流式日志到来时怎么实时高亮
流式场景下，新日志是逐行或分块 append 到容器的，不能等全部加载完再扫一遍 DOM。关键点在于「增量处理」：
- 每收到一条日志字符串（如
"2026-10-27T12:05:22Z ERROR db connection timeout"），先用正则提取级别，生成带<span></span>的 HTML 片段 - 不要用
container.innerHTML += html—— 这会强制重排整个容器，100 行后卡顿明显 - 改用
container.appendChild(document.createElement('div')).innerHTML = html，确保每次只操作新增节点 - 如果用了虚拟滚动，高亮逻辑必须绑定在「可视区域行渲染完成」之后，而非追加即高亮
- 高频日志（如每秒 50 行）需节流：用
requestIdleCallback批量处理最近 10 行，避免阻塞主线程
最容易被忽略的是级别映射一致性——前端写的 ERROR 必须和后端日志框架（如 log4j、winston、hilog）输出的实际字符串完全一致。大小写、方括号、冒号、空格都不能差。线上出问题，八成是因为开发环境日志是 error，而生产环境是 ERROR，正则没开 i 标志。
