CodeMirror正则匹配实现日志字段高亮技巧

CodeMirror是一款功能强大的在线代码编辑器，广泛应用于各种Web开发场景。本文将详细介绍如何利用正则表达式在CodeMirror中实现日志字段的高亮显示，帮助开发者快速定位关键信息。

一、准备工作

1. 引入CodeMirror库文件

<link rel="stylesheet" href="codemirror.css">
<script src="codemirror.js"></script>

2. 创建编辑器实例

var editor = CodeMirror.fromTextArea(document.getElementById("logArea"), {
  lineNumbers: true,
  mode: "text/plain"
});

二、使用正则表达式定义高亮规则

1. 定义高亮样式

.cm-error { color: #f00; }
.cm-warning { color: #ff9900; }
.cm-info { color: #00f; }

2. 创建自定义模式

CodeMirror.defineMode("log", function() {
  return {
    token: function(stream) {
      if (stream.match(/\[ERROR\]/)) return "error";
      if (stream.match(/\[WARN\]/)) return "warning";
      if (stream.match(/\[INFO\]/)) return "info";
      if (stream.match(/\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}/)) return "date";
      stream.next();
      return null;
    }
  };
});

三、应用自定义模式

1. 更新编辑器配置

editor.setOption("mode", "log");

四、高级技巧

1. 动态更新高亮规则

function updateHighlightRules(rules) {
  CodeMirror.defineMode("dynamicLog", function() {
    return {
      token: function(stream) {
        for (var i = 0; i < rules.length; i++) {
          if (stream.match(rules[i].regex)) {
            return rules[i].style;
          }
        }
        stream.next();
        return null;
      }
    };
  });
  editor.setOption("mode", "dynamicLog");
}

2. 处理多行日志

token: function(stream, state) {
  if (stream.sol() && stream.match(/\[ERROR\]/)) {
    state.errorMode = true;
    return "error";
  }
  if (state.errorMode) {
    if (stream.sol()) state.errorMode = false;
    else return "error";
  }
  // 其他规则...
}

五、性能优化建议

1. 避免过于复杂的正则表达式

2. 对大日志文件使用分批加载

3. 考虑使用Web Worker处理高亮

通过以上方法，您可以轻松实现日志文件的高亮显示，帮助开发团队快速定位问题。CodeMirror的灵活性使其成为处理日志显示的理想选择。