Monaco Editor内容变更时重新应用装饰无效问题求助

我在应用中使用Monaco Code Editor，想要实现类似VSCode的全局文件内容搜索功能，匹配的文本需要高亮显示。目前已经通过createDecorationsCollection()在加载时完成了文本高亮，但修改高亮文本后，旧的匹配结果装饰依然存在；尝试在onChange函数中重新应用装饰集合也没有效果。

核心问题在于每次更新搜索结果时，需要先清空旧的装饰集合，再重新计算并设置新的装饰。以下是关键实现步骤：

1. 全局保存装饰集合实例 #

不要每次创建新的DecorationsCollection，初始化时创建一个实例并全局保存，后续直接更新它：

// 初始化编辑器后创建全局装饰集合
let searchDecorations = editor.createDecorationsCollection();

2. 封装高亮更新函数 #

编写统一的函数，根据当前搜索关键词生成对应的装饰数组，并更新到集合中：

function updateSearchHighlights(searchTerm) {
  const decorations = [];
  const model = editor.getModel();
  
  // 关键词为空时直接清空所有高亮
  if (!searchTerm) {
    searchDecorations.clear();
    return;
  }

  const text = model.getValue();
  // 转义正则特殊字符，避免匹配异常
  const safeTerm = searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  const regex = new RegExp(safeTerm, 'g');
  let match;

  // 遍历所有匹配项生成装饰范围
  while ((match = regex.exec(text)) !== null) {
    const startPos = model.getPositionAt(match.index);
    const endPos = model.getPositionAt(match.index + match[0].length);
    decorations.push({
      range: new monaco.Range(
        startPos.lineNumber,
        startPos.column,
        endPos.lineNumber,
        endPos.column
      ),
      options: {
        inlineClassName: 'search-highlight',
      },
    });
  }

  // 用新装饰替换旧装饰
  searchDecorations.set(decorations);
}

3. 绑定触发事件 #

在搜索框输入变化、编辑器内容变更时调用高亮更新函数：

// 监听搜索框输入
document.getElementById('search-input').addEventListener('input', (e) => {
  updateSearchHighlights(e.target.value);
});

// 监听编辑器内容修改，确保文本变更后高亮同步更新
editor.onDidChangeModelContent(() => {
  const currentSearchTerm = document.getElementById('search-input').value;
  updateSearchHighlights(currentSearchTerm);
});

4. 添加高亮样式 #

在CSS中定义高亮的视觉效果：

.search-highlight {
  background-color: rgba(255, 215, 0, 0.3);
  border-radius: 3px;
}

• 复用同一个DecorationsCollection实例，调用set()方法会自动替换旧装饰，无需手动删除单个项；
• 关键词为空时调用clear()清空所有高亮，避免残留；
• 对搜索关键词做正则转义，防止特殊字符导致匹配逻辑错误。

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