CodeMirror日志高亮：正则表达式与CSS实现字段高亮技巧

一、CodeMirror高亮原理概述

CodeMirror作为一款功能强大的代码编辑器，支持通过mode配置实现语法高亮。对于日志文件的高亮处理，我们需要结合正则表达式匹配和CSS样式定义两个关键环节。

二、正则表达式匹配日志字段

// 示例：匹配常见日志格式
CodeMirror.defineMode('loghighlight', function() {
  return {
    token: function(stream) {
      // 匹配时间戳
      if (stream.match(/^\[\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}\]/)) 
        return 'timestamp';
      
      // 匹配错误级别
      if (stream.match(/(ERROR|WARN|INFO|DEBUG)/)) 
        return 'loglevel' + stream.current().toLowerCase();
      
      // 匹配IP地址
      if (stream.match(/\b\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\b/))
        return 'ip-address';
      
      stream.next();
      return null;
    }
  };
});

三、CSS样式定义

/* 基础日志样式 */
.cm-s-default .cm-timestamp { color: #6a9955; }

/* 不同日志级别颜色 */
.cm-s-default .cm-loglevelerror { color: #f44747; font-weight: bold; }
.cm-s-default .cm-loglevelwarn { color: #d7ba7d; }
.cm-s-default .cm-loglevelinfo { color: #9cdcfe; }
.cm-s-default .cm-logleveldebug { color: #b5cea8; }

/* IP地址特殊样式 */
.cm-s-default .cm-ip-address { 
  text-decoration: underline;
  color: #569cd6;
}

四、完整实现步骤

1. 创建自定义mode文件（如log-highlight.js）
2. 定义正则匹配规则和token类型
3. 编写对应的CSS样式
4. 在页面中引入样式文件和mode配置
5. 初始化CodeMirror时指定mode: 'loghighlight'

五、高级技巧

• 动态加载配置：通过AJAX加载不同的高亮规则
• 多级嵌套匹配：处理复杂的日志结构
• 主题切换：适配不同配色方案
• 性能优化：避免过于复杂的正则影响渲染效率

六、常见问题解决

Q：正则匹配失效怎么办？
A：使用regex测试工具验证表达式，确保考虑了日志的各种变体格式。

Q：高亮样式不生效？
A：检查CSS选择器是否正确，确保类名前缀与CodeMirror主题一致（如.cm-s-default）。

Q：如何处理超长日志行？
A：启用CodeMirror的lineWrapping配置，并考虑对超长内容进行特殊样式处理。