编辑器文本选中方向导致格式处理异常问题求助

看起来你遇到的核心问题是文本选择方向（正向/反向）导致格式处理逻辑失效——当前代码依赖startOffset < endOffset来判断遍历方向，但反向选择时anchorNode和focusNode的位置是颠倒的，再加上TreeWalker遍历方向错误、样式状态被意外修改，才出现了只有部分反向选择能生效的情况。

先拆解下你的代码里的几个关键问题：

• 没有标准化选择范围：反向选择时，anchorNode是选择的终点，focusNode是起点，但你直接用这两个变量作为遍历的起止，导致范围判断错误。
• 遍历方向错误：反向选择时应该从终点往起点遍历（用previousNode()），但你还是用了nextNode()，导致遍历的节点范围不对。
• 样式状态被污染：遍历过程中修改了objStyle.val，后续节点的样式判断会基于前一个节点的修改结果，导致逻辑混乱。
• 部分文本节点处理不严谨：用innerHTML.replace()可能会破坏已有嵌套结构，应该用DOM操作来拆分和包裹文本。

第一步：标准化选择范围 #

先统一处理选择的起始和结束节点/偏移，不管用户是正向还是反向选择：

var selection = window.getSelection();
if (selection.isCollapsed) return;

// 标准化选择范围：确保start是选择的起始，end是选择的结束
var range = selection.getRangeAt(0);
var startNode = range.startContainer;
var startOffset = range.startOffset;
var endNode = range.endContainer;
var endOffset = range.endOffset;

// 拆分文本节点，把选中的内容单独分离出来
if (startNode instanceof Text) {
  startNode.splitText(startOffset);
  startNode = startNode.nextSibling;
}
if (endNode instanceof Text) {
  endNode.splitText(endOffset);
}

这里用range.startContainer和range.endContainer替代anchorNode/focusNode，就能保证不管选择方向，start都是真正的起始，end是真正的结束。

第二步：调整TreeWalker遍历逻辑 #

根据标准化后的范围，判断遍历方向，同时避免修改全局的objStyle.val（可以创建副本）：

function filterFunction(node) {
  if (node.id === 'ignore') return NodeFilter.FILTER_REJECT;
  return NodeFilter.FILTER_ACCEPT;
}

var nodeTypes = NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT;
var root = range.commonAncestorContainer;
var walker = document.createTreeWalker(root, nodeTypes, { acceptNode: filterFunction }, false);

// 创建样式状态副本，避免遍历中污染原对象
var styleConfig = {
  attr: objStyle.attr,
  val: objStyle.val
};

// 判断遍历方向：startNode在endNode之前则正向遍历，否则反向
var isForward = (startNode.compareDocumentPosition(endNode) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0;
walker.currentNode = isForward ? startNode : endNode;

var currentNode = walker.currentNode;
while (currentNode) {
  // 终止条件：正向遍历到endNode，反向遍历到startNode
  if ((isForward && currentNode === endNode) || (!isForward && currentNode === startNode)) {
    break;
  }

  if (currentNode.nodeType === Node.TEXT_NODE && currentNode.nodeValue.trim() !== '') {
    var parentSpan = currentNode.parentElement;
    // 先判断当前节点的样式状态，计算要设置的目标样式
    var currentStyle = $(parentSpan).css(styleConfig.attr);
    var targetVal;
    switch (styleConfig.val) {
      case 'bold':
        targetVal = currentStyle.includes('700') ? 'normal' : '700';
        break;
      case 'italic':
        targetVal = currentStyle.includes('italic') ? 'normal' : 'italic';
        break;
      case 'underline':
        targetVal = currentStyle.includes('underline') ? 'none' : 'underline';
        break;
      case 'line-through':
        targetVal = currentStyle.includes('line-through') ? 'none' : 'line-through';
        break;
      default:
        targetVal = styleConfig.val;
    }

    // 处理文本节点：如果是完整节点，直接修改父span；如果是部分节点，包裹新span
    if (currentNode === parentSpan.firstChild && currentNode === parentSpan.lastChild) {
      // 完整文本节点，直接修改父span样式
      $(parentSpan).css(styleConfig.attr, targetVal);
    } else {
      // 部分文本节点，拆分并包裹新span
      var newSpan = document.createElement('span');
      newSpan.style[styleConfig.attr] = targetVal;
      currentNode.parentNode.insertBefore(newSpan, currentNode);
      newSpan.appendChild(currentNode);
    }
  }

  // 根据方向切换遍历方法
  currentNode = isForward ? walker.nextNode() : walker.previousNode();
}

关键修复点说明 #

1. 标准化范围：用Range的startContainer/endContainer替代Selection的anchorNode/focusNode，彻底解决选择方向的问题。
2. 样式状态隔离：创建styleConfig副本，避免遍历过程中修改原objStyle导致后续节点判断错误。
3. 遍历方向动态调整：用compareDocumentPosition判断节点位置，决定是正向还是反向遍历。
4. DOM操作替代innerHTML：用appendChild和insertBefore来包裹部分选中的文本，避免破坏已有嵌套结构。

额外优化建议 #

• 你的外层div设置了contenteditable="false"，但编辑区域是内部的.divContent？建议确保编辑区域的contenteditable状态正确，避免选择范围异常。
• 可以给fontFormatContainer统一添加基础样式，减少内联样式的冗余，也方便后续样式判断。

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