如何使用Quill.js为匹配特定规则的文本应用样式？

要实现为大括号{...}内的文本应用指定样式（如粗体、背景色），核心是准确定位匹配文本的绝对位置并避免循环触发文本变化事件，以下是正确的实现方式：

关键问题分析 #

你之前的代码存在几个核心问题：

• 仅匹配第一个符合规则的文本，未处理全局匹配
• 使用delta操作内的相对位置而非文档绝对位置，导致样式应用错位
• 未过滤程序自身触发的text-change事件，易引发循环调用，导致内容重复或样式全局应用

修正后的实现代码 #

// 匹配所有{...}格式的文本（包含大括号本身）
const tagRegex = /{[^}]+}/g;

quillRef.current.on('text-change', (delta, oldDelta, source) => {
  // 仅处理用户输入触发的变化，避免循环触发
  if (source !== 'user' || !quillRef.current) return;

  let currentDocPosition = 0; // 记录当前操作在文档中的起始绝对位置

  delta.forEach((op) => {
    if (typeof op.insert === 'string') {
      let matchResult;
      // 遍历当前字符串操作中所有匹配项
      while ((matchResult = tagRegex.exec(op.insert)) !== null) {
        const matchStart = currentDocPosition + matchResult.index;
        const matchLength = matchResult[0].length;

        // 应用样式：粗体+背景色，可按需添加自定义格式
        quillRef.current.formatText(
          matchStart,
          matchLength,
          { bold: true, background: '#ffff00' },
          'silent' // 用silent参数避免触发text-change，防止循环
        );
      }
    }
    // 更新绝对位置：字符串加长度，换行符加1
    currentDocPosition += typeof op.insert === 'string' ? op.insert.length : 1;
  });
});

核心优化点 #

1. 过滤触发源：通过source !== 'user'跳过程序自身（如formatText）触发的文本变化，结合'silent'参数调用formatText，彻底避免循环触发。
2. 计算绝对位置：delta是增量操作，需累加前面所有操作的长度得到当前操作在文档中的起始位置，确保样式应用到正确位置。
3. 全局匹配处理：使用while循环遍历所有匹配项，避免只处理第一个符合规则的文本。

自定义格式扩展 #

如果需要更复杂的自定义样式（而非内置格式），可以先注册自定义格式：

// 注册自定义tag格式
Quill.register({
  'formats/tag': class TagFormat {
    static create() {
      const span = document.createElement('span');
      span.style.background = '#e6f7ff';
      span.style.borderRadius = '3px';
      span.style.padding = '0 4px';
      return span;
    }
  }
});

// 应用自定义格式
quillRef.current.formatText(
  matchStart,
  matchLength,
  { tag: true },
  'silent'
);

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