如何替换选中文本并保留内部HTML标签？实现大小写转换需求

当然可以实现！你遇到的问题根源在于直接用window.getSelection().toString()只提取了纯文本，丢失了原有的HTML标签结构。要保留标签，我们需要遍历选中范围内的所有文本节点，只修改文本内容，而保留<span>这类元素节点不动。

下面是完整的解决方案：

核心思路 #

1. 获取当前选中的范围（Range），确认选中内容在目标容器#zprava内。
2. 遍历该范围内的所有文本节点，对每个文本节点的内容执行大小写转换。
3. 避免直接替换整个选中内容，而是逐个修改文本节点，确保原有的HTML标签结构完全保留。

完整代码实现 #

HTML部分 #

<div id="zprava">
  这是一段包含<span style="color: red">红色span标签</span>的文本，<span style="font-weight: bold">粗体span标签</span>也会被保留。
</div>
<button onclick="transformSelectedText('upper')">转大写</button>
<button onclick="transformSelectedText('lower')">转小写</button>

JavaScript部分（依赖jQuery） #

function transformSelectedText(type) {
  const sel = window.getSelection();
  if (!sel.rangeCount) return;

  const range = sel.getRangeAt(0);
  const targetContainer = document.getElementById('zprava');
  
  // 检查选中内容是否完全在#zprava内
  if (!targetContainer.contains(range.commonAncestorContainer)) {
    alert('请仅选中#zprava内的文本');
    return;
  }

  // 定义转换函数
  const transformFn = type === 'upper' 
    ? (text) => text.toUpperCase() 
    : (text) => text.toLowerCase();

  // 遍历范围内的所有文本节点
  const textNodes = getTextNodesInRange(range);
  textNodes.forEach(node => {
    // 修改文本节点内容，保留标签结构
    node.textContent = transformFn(node.textContent);
  });

  // 重新选中修改后的内容（可选，让选中状态保持一致）
  sel.removeAllRanges();
  sel.addRange(range);
}

// 辅助函数：获取范围内的所有文本节点
function getTextNodesInRange(range) {
  const textNodes = [];
  const walker = document.createTreeWalker(
    range.commonAncestorContainer,
    NodeFilter.SHOW_TEXT,
    {
      acceptNode: function(node) {
        if (range.intersectsNode(node)) {
          return NodeFilter.FILTER_ACCEPT;
        }
        return NodeFilter.FILTER_REJECT;
      }
    }
  );

  let node;
  while (node = walker.nextNode()) {
    textNodes.push(node);
  }
  return textNodes;
}

关键细节说明 #

• TreeWalker API：用它来安全遍历选中范围内的文本节点，避免手动遍历DOM带来的复杂边界处理。
• 范围检查：确保用户选中的内容在#zprava容器内，和你原始代码的逻辑保持一致。
• 保留选中状态：修改完成后重新添加范围，让用户的选中状态保持不变，提升交互体验。

这样操作后，不管选中的文本里包含多少<span>或其他内联标签，都会只修改文本内容，标签的结构和样式完全保留。

内容的提问来源于stack exchange，提问作者Honzík Azjol Havelka