日志高亮必须用 treewalker 操作文本节点而非 innerhtml.replace()，因后者会破坏 html 结构、执行脚本、损坏 url；需加 unicode 边界正则匹配中文关键词，并手写带 box-decoration-break 和深色模式适配的 mark 样式。
为什么直接 innerHTML.replace() 在日志搜索里必然出事
日志内容天然混杂 HTML 字符（如 <div>、<code> ）、转义符号、URL 路径甚至用户输入的原始脚本片段。用 innerHTML.replace() 处理，等于把整段日志当纯字符串切，结果是：<script>alert(1)</script> 会被直接拼进 DOM 执行；file://log?level=ERROR&id=123 里的 & 变成 & 导致 URL 解析失败；更常见的是 <td>[ERROR]</td> 被切开，变成 <td><mark>[ERROR]</mark></td> —— 表格结构当场崩溃。
日志高亮必须只操作文本节点，用 TreeWalker
日志容器（比如 <pre class="brush:php;toolbar:false;"></pre> 或 <div class="log-view">）里的可读文本，必须和标签、属性、事件完全隔离。核心路径是：
<ul>
<li>调用 <code>document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null, false) 获取所有文本节点
if (!node.textContent.trim()) continue
if (['SCRIPT', 'STYLE', 'TEXTAREA'].includes(node.parentElement?.tagName)) continue
node.textContent 做匹配，而非整个容器的 innerHTML
中文日志关键词匹配要防“服务”命中“微服务架构”
日志里大量中文术语（如 超时、重试、OOM）若用 /keyword/gi 简单替换，会把 重试次数超限 切成 重<mark>试</mark>次数<mark>超</mark>限，语义全毁。正确做法是加 Unicode 边界断言：
const escaped = keyword.replace(/[.*+?^${}()|[]\]/g, '\$&');const reg = new RegExp(`(?
这个正则能确保只匹配独立词，但注意：它对 OOM_KILLED 这类下划线分隔词无效，需额外按 _ 拆分后逐个匹配。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
mark 样式在日志场景下必须手写且带 fallback
日志页面常运行在终端模拟器、IDE 内嵌视图或深色主题终端中，浏览器默认黄色背景（#ffeb3b）在 #1e1e1e 背景上对比度仅 ~1.3:1，完全不可读。必须强制声明：
mark { background-color: #ffcc00; color: #000; padding: 0.1em 0.25em; border-radius: 2px; box-decoration-break: clone;}
box-decoration-break: clone 是关键——日志里常有换行文本，不加这句，mark 跨行时背景会断裂或消失。另外，别忘了加深色模式适配：@media (prefers-color-scheme: dark) { mark { background-color: #ff9800; } }。
