功能优化需求：光标处于括号后方时高亮匹配括号对（对标VSCode/JetBrains）

核心调整思路 #

• 扩展光标位置判定逻辑：不再仅检测光标是否紧邻括号左侧，同时支持检测光标是否紧邻括号右侧
• 光标在括号右侧时，向前偏移一个字符定位到括号本身，复用原有括号匹配和高亮逻辑
• 保留核心的括号匹配算法（栈遍历/正则匹配），仅修改触发条件

具体实现示例（基于编辑器API的通用逻辑） #

假设你正在基于类似Monaco Editor的框架开发，以下是优化后的关键代码：

// 优化后的匹配检测函数
function getMatchingBracket(editor) {
  const position = editor.getPosition();
  let targetChar = null;
  let targetPosition = {...position};

  // 检测光标是否在括号左侧
  targetChar = editor.getModel().getValueInRange({
    startLineNumber: position.lineNumber,
    startColumn: position.column - 1,
    endLineNumber: position.lineNumber,
    endColumn: position.column
  });
  if (isBracket(targetChar)) {
    targetPosition.column -= 1;
  } 
  // 检测光标是否在括号右侧，若则定位到括号位置
  else {
    targetChar = editor.getModel().getValueInRange({
      startLineNumber: position.lineNumber,
      startColumn: position.column,
      endLineNumber: position.lineNumber,
      endColumn: position.column + 1
    });
    if (!isBracket(targetChar)) return null;
  }

  // 复用原有匹配逻辑查找对应括号
  const match = findMatchingBracket(editor, targetPosition, targetChar);
  if (match) {
    highlightBrackets(editor, targetPosition, match);
  }
  return match;
}

// 判断字符是否为括号
function isBracket(char) {
  return /^[\(\)\{\}\[\]]$/.test(char);
}

// 栈遍历法查找匹配括号（核心匹配逻辑，可复用原有实现）
function findMatchingBracket(editor, position, char) {
  const model = editor.getModel();
  const opposite = {
    '(': ')', ')': '(',
    '{': '}', '}': '{',
    '[': ']', ']': '['
  }[char];
  if (!opposite) return null;

  let stack = 1;
  const direction = char === '(' || char === '{' || char === '[' ? 1 : -1;
  let currentLine = position.lineNumber;
  let currentCol = position.column + direction;

  while (currentLine >= 1 && currentLine <= model.getLineCount()) {
    const lineText = model.getLineContent(currentLine);
    const startIdx = direction === 1 ? currentCol - 1 : 0;
    const endIdx = direction === 1 ? lineText.length : currentCol - 1;
    const chars = direction === 1 ? lineText.slice(startIdx) : lineText.slice(0, endIdx).split('').reverse();

    for (const c of chars) {
      if (c === char) stack++;
      if (c === opposite) stack--;
      if (stack === 0) {
        return {
          lineNumber: currentLine,
          column: direction === 1 ? startIdx + chars.indexOf(c) + 1 : endIdx - chars.indexOf(c)
        };
      }
    }

    currentLine += direction;
    currentCol = direction === 1 ? 1 : model.getLineLength(currentLine) + 1;
  }
  return null;
}

// 高亮括号对的辅助函数
function highlightBrackets(editor, pos1, pos2) {
  editor.deltaDecorations([], [
    {
      range: new monaco.Range(pos1.lineNumber, pos1.column, pos1.lineNumber, pos1.column + 1),
      options: { className: 'bracket-highlight' }
    },
    {
      range: new monaco.Range(pos2.lineNumber, pos2.column, pos2.lineNumber, pos2.column + 1),
      options: { className: 'bracket-highlight' }
    }
  ]);
}

关键注意事项 #

• 边界处理：添加光标在文档首尾的越界判断，避免读取不存在的字符
• 嵌套正确性：保留栈遍历逻辑确保嵌套括号的匹配准确性，避免高亮错误对
• 性能优化：对光标移动事件添加防抖，减少高频匹配检测带来的性能损耗
• 视觉对齐：通过CSS调整.bracket-highlight样式，匹配VSCode/JetBrains的高亮效果（如浅蓝色边框+背景）

内容的提问来源于stack exchange，提问作者qiz_newbie