如何在nicEditor富文本编辑器中替换选中的文本（非首次匹配）

使用nicEditor富文本编辑器时，代码内容会被拆分为多个带样式的<span>节点存储（如示例中的结构），但渲染后呈现为连续的代码文本。需要实现精准替换用户选中的任意内容（比如示例中的第二个innerHTML），要求不依赖jQuery，且仅替换选中部分，而非文本匹配的内容。

核心利用原生Selection和Range API直接操作选中的DOM范围，完全适配nicEditor的拆分节点结构，精准替换选中内容：

// 获取当前页面的选中对象
const selection = window.getSelection();

// 校验是否有有效选中内容（排除仅光标定位的情况）
if (!selection.rangeCount || selection.isCollapsed) {
  alert('请先选中要替换的内容');
  return;
}

// 获取选中的具体范围
const range = selection.getRangeAt(0);

// 定义要替换的新内容
const replacementText = 'outerHTML'; // 可替换为任意目标内容

// 删除选中的内容
range.deleteContents();

// 创建匹配原有样式的文本容器，保证格式统一
const styleSpan = document.createElement('span');
const startContainer = range.startContainer;
// 继承选中起始位置的样式，适配nicEditor的span拆分结构
if (startContainer.tagName === 'SPAN') {
  styleSpan.style.cssText = startContainer.style.cssText;
} else if (startContainer.parentNode.tagName === 'SPAN') {
  styleSpan.style.cssText = startContainer.parentNode.style.cssText;
}
styleSpan.textContent = replacementText;

// 将新内容插入到选中位置
range.insertNode(styleSpan);

// 可选：将光标定位到新内容末尾，提升编辑体验
selection.removeAllRanges();
range.setStartAfter(styleSpan);
range.collapse(true);
selection.addRange(range);

方案优势 #

1. 精准性：直接基于用户选中的DOM范围操作，完全不会误替换其他文本匹配的内容
2. 兼容性：原生API支持所有现代浏览器，无需依赖任何框架
3. 格式一致性：自动继承选中位置的原有样式，不会破坏nicEditor的富文本格式
4. 通用性：适配nicEditor将文本拆分为多个span的结构，不管选中内容跨多少个节点都能正常工作

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