如何在contenteditable div中实现退格键先选<>开头文本再删除

核心思路 #

监听退格键事件，通过window.getSelection()和Range对象处理光标与选中逻辑，用状态标记区分两次退格行为：第一次定位并选中<>开头的引用文本，第二次删除选中内容。

代码实现 #

const editableDiv = document.getElementById('your-editable-div');
let isQuoteSelected = false; // 标记是否已选中引用文本

editableDiv.addEventListener('keydown', (e) => {
  if (e.key !== 'Backspace') return;
  e.preventDefault(); // 拦截默认退格行为

  // 第二次退格：删除已选中的引用文本
  if (isQuoteSelected) {
    const selection = window.getSelection();
    if (selection.rangeCount > 0) {
      selection.getRangeAt(0).deleteContents();
    }
    isQuoteSelected = false;
    return;
  }

  // 第一次退格：查找并选中<>开头的引用文本
  const selection = window.getSelection();
  if (selection.rangeCount === 0) return;

  const range = selection.getRangeAt(0);
  let currentNode = range.startContainer;

  // 确保操作对象是文本节点
  if (currentNode.nodeType !== Node.TEXT_NODE) {
    currentNode = currentNode.firstChild;
    if (!currentNode || currentNode.nodeType !== Node.TEXT_NODE) {
      document.execCommand('delete', false, null);
      return;
    }
  }

  const text = currentNode.textContent;
  let startOffset = range.startOffset;
  let quoteStart = -1;

  // 从光标位置向前查找<>的起始索引
  for (let i = startOffset - 2; i >= 0; i--) {
    if (text.slice(i, i + 2) === '<>') {
      quoteStart = i;
      break;
    }
  }

  // 未找到<>时执行默认退格
  if (quoteStart === -1) {
    document.execCommand('delete', false, null);
    return;
  }

  // 确定引用文本的结束位置（示例：匹配到第一个非字母数字字符，可根据需求调整）
  let quoteEnd = quoteStart + 2;
  while (quoteEnd < text.length && /[a-zA-Z0-9]/.test(text[quoteEnd])) {
    quoteEnd++;
  }

  // 创建Range并选中目标文本
  const targetRange = document.createRange();
  targetRange.setStart(currentNode, quoteStart);
  targetRange.setEnd(currentNode, quoteEnd);
  
  selection.removeAllRanges();
  selection.addRange(targetRange);
  isQuoteSelected = true;
});

关键细节说明 #

1. 替代selectStart/selectEnd: 使用Range对象的setStart()和setEnd()方法定义选中范围，配合window.getSelection()管理选区，这是contenteditable环境中控制光标与选中的标准方式。
2. 状态标记: 用isQuoteSelected变量记录是否已进入"待删除"状态，区分两次退格的不同行为。
3. 边界处理:
   • 若光标不在文本节点中，尝试定位到第一个子文本节点；若仍无效则执行默认退格。
   • 未找到<>开头的文本时， fallback到默认退格逻辑，不影响正常编辑。
4. 结束位置自定义: 示例中以非字母数字字符作为引用文本的结束标记，可根据你的笔记应用格式需求（如换行、空格、特定符号）调整判断规则。

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