如何在Lexical.js中通过代码程序化选中文本范围

你的代码存在两个核心问题：

1. 直接用DOM根元素创建范围，Lexical的选择系统依赖自身的虚拟节点结构，这种操作方式不符合它的设计逻辑
2. 在editor.update()外部调用$getSelection()，此时更新上下文已经结束，无法获取到update内部设置的选择状态

正确实现方案 #

Lexical的$开头API必须在editor.update()或editorState.read()的上下文内调用，而且要基于Lexical的文本节点来匹配全局字符偏移量，不能直接操作DOM。

第一步：实现偏移量匹配辅助函数

这个函数会遍历编辑器的所有文本节点，找到全局偏移量对应的节点和局部位置：

function findNodeAndOffset(editor, globalOffset) {
  let currentOffset = 0;
  let targetNode = null;
  let targetOffset = 0;

  editor.getEditorState().read(() => {
    $getRoot().forEachDescendant((node) => {
      if (targetNode) return;
      if (node.isTextNode()) {
        const textLength = node.getTextContent().length;
        if (currentOffset + textLength >= globalOffset) {
          targetNode = node;
          targetOffset = globalOffset - currentOffset;
          return;
        }
        currentOffset += textLength;
      } else if (node.getType() === 'linebreak') {
        currentOffset += 1;
      }
    });
  });

  return { node: targetNode, offset: targetOffset };
}

第二步：在update上下文内设置选择并获取内容

editor.update(() => {
  // 示例：选中"Hello worldd!"中的"worldd"，起始偏移6，结束偏移12
  const startInfo = findNodeAndOffset(editor, 6);
  const endInfo = findNodeAndOffset(editor, 12);

  if (startInfo.node && endInfo.node) {
    // 创建范围选择并设置锚点和焦点
    const rangeSelection = $createRangeSelection();
    rangeSelection.setAnchor(startInfo.node, startInfo.offset);
    rangeSelection.setFocus(endInfo.node, endInfo.offset);
    $setSelection(rangeSelection);

    // 在update上下文内获取选中内容
    const selection = $getSelection();
    if (selection instanceof RangeSelection) {
      const selectedText = selection.getTextContent();
      console.log('选中的文本:', selectedText); // 输出"worldd"
    }
  }
});

额外：给错误单词添加高亮样式

如果需要高亮错误文本，可以在选中后修改文本节点的格式：

// 在update上下文内，选中后添加高亮
if (selection instanceof RangeSelection) {
  const anchor = selection.anchor;
  const focus = selection.focus;
  
  if (anchor.key === focus.key) {
    // 选中的是同一个文本节点
    const textNode = anchor.getNode();
    const text = textNode.getTextContent();
    const before = text.slice(0, anchor.offset);
    const highlightedText = text.slice(anchor.offset, focus.offset);
    const after = text.slice(focus.offset);

    // 替换原节点为拆分后的节点，高亮部分添加格式
    textNode.replace(
      $createTextNode(before)
        .append($createTextNode(highlightedText).setFormat('highlight'))
        .append($createTextNode(after))
    );
  }
}

之后只需要在CSS中定义高亮样式即可：

.lexical-highlight {
  background-color: #ffeb3b;
}

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