本文旨在详细阐述如何在不依赖jquery的情况下，利用原生javascript api实现对html/富文本输入区域中用户选中文本的精确查找与替换。我们将深入探讨`window.getselection()`和`range`对象的核心方法，并通过具体的代码示例，指导读者完成从获取选区、删除内容到插入新内容的整个过程，以实现灵活的文本内容管理。
理解富文本编辑器中的文本选择与替换
在富文本编辑器或任何可编辑的HTML内容区域中，直接使用字符串替换方法（如element.innerHTML.replace()）通常无法满足对用户“选中文本”进行操作的需求。这是因为innerHTML操作的是整个元素的字符串内容，它无法感知用户在界面上精确选择的某个片段。为了实现对用户选区（selection）的精确控制，我们需要借助浏览器提供的Selection和Range API。
本教程将详细介绍如何使用原生JavaScript实现这一功能，核心思想是：首先获取用户当前的文本选择区域，然后移除该区域的内容，最后在相同位置插入我们希望替换的新内容。
核心JavaScript API解析
实现选中文本替换主要依赖以下几个关键的JavaScript API：
window.getSelection()
window.getSelection()方法返回一个Selection对象，代表用户当前选择的文本范围或光标的当前位置。一个Selection对象可以包含一个或多个Range对象（尽管在大多数常见情况下，用户只选择一个连续的文本区域，所以通常只有一个Range）。
立即学习“前端免费学习笔记（深入）”；
Selection.getRangeAt(index)
Selection对象提供getRangeAt(index)方法，用于获取指定索引的Range对象。由于多数情况下只有一个选区，我们通常使用getRangeAt(0)来获取第一个（也是唯一一个）Range对象。Range对象是DOM中表示文档片段的抽象，它可以精确定义一个文档的起始和结束点。
Range.extractContents()
Range.extractContents()方法会从文档中移除Range所包含的内容，并将其作为一个DocumentFragment返回。这个方法在需要获取并处理被移除内容时非常有用。如果只是简单地替换，我们也可以直接使用deleteContents()。
Range.deleteContents()
Range.deleteContents()方法直接从文档中删除Range所包含的内容，不返回任何值。这是实现替换操作的关键一步，它清除了选区内的旧内容。
Range.insertNode(newNode)
Range.insertNode(newNode)方法在Range的起始位置插入一个newNode。在删除选区内容后，Range的起始和结束点会合并到原来的起始位置，此时插入新节点即可实现替换。
实现选中文本替换的步骤
下面是实现选中文本替换的详细步骤：
获取当前用户选择（Selection）和范围（Range） 使用window.getSelection()获取Selection对象，然后通过getRangeAt(0)获取第一个Range对象。
创建替换内容 根据需求创建新的内容。这可以是一个简单的文本节点（document.createTextNode()），也可以是一个新的HTML元素（document.createElement()），或者像示例中那样，将原有选中的文本内容包装在一个新的HTML元素中。
移除原有选区内容 调用range.deleteContents()方法来删除用户选中的所有内容。
插入新内容 调用range.insertNode(newNode)方法，将步骤2中创建的新内容插入到原选区的位置。
示例代码
以下是一个完整的示例，演示了如何在HTML内容区域中实现选中文本的替换。该示例将选中的文本内容包裹在一个带有特定标记的<span>标签中，模拟一种常见的富文本编辑操作，例如添加批注或高亮。
HTML 结构：
<div
contenteditable="true"
style="
color: #bababa;
background-color: #0c0a08;
font-family: Menlo, Monaco, 'Courier New', monospace;
font-weight: normal;
font-size: 15px;
line-height: 23px;
white-space: pre;
padding: 10px; /* 增加内边距使其更像编辑器 */
min-height: 100px; /* 增加最小高度 */
border: 1px solid #333; /* 添加边框 */
"
>
<div>
<span style="color: #bababa"> selectionRange</span
><span style="color: #9d8262">.</span
><span style="color: #bababa">range</span
><span style="color: #9d8262">.</span
><span style="color: #bababa">endContainer</span
><span style="color: #9d8262">.</span
><span style="color: #bababa">innerHTML</span
><span style="color: #9d8262"> =</span
><span style="color: #bababa"> newParent</span
><span style="color: #9d8262">.</span
><span style="color: #bababa">innerHTML;</span>
</div>
<p>这是一段可编辑的文本，请尝试选择其中的<b>innerHTML</b>并点击按钮进行替换。</p>
<p>第二个innerHTML在这里。</p>
</div>
<input type="button" onclick="replaceSelectedText();" value="替换选中文本"/>
JavaScript 代码：
function replaceSelectedText() {
// 1. 获取当前用户选择和范围
var selection = window.getSelection();
if (!selection.rangeCount) {
// 如果没有选择任何内容，则不执行操作
return;
}
var range = selection.getRangeAt(0);
// 2. 提取选中的文本内容
// extractContents() 会移除内容并返回 DocumentFragment
// 如果我们只是想获取文本，可以使用 range.toString() 或 selection.toString()
// 但为了演示，我们先提取并将其内容用于构建新节点
var selectedContentFragment = range.extractContents();
var selectedText = selectedContentFragment.textContent || selectedContentFragment.innerText;
// 3. 创建替换内容
// 示例中将选中的文本内容包裹在一个带有特定标记的<span>中
var span = document.createElement("span");
span.innerHTML = `{{C1::${selectedText}}}`; // 使用模板字符串插入原文本，并添加特定标记
span.style.backgroundColor = "yellow"; // 示例：高亮背景
span.style.color = "black"; // 示例：文本颜色
// 4. 插入新内容
// range.deleteContents(); // extractContents() 已经移除了内容，所以这里不需要再次删除
range.insertNode(span);
// 清除当前的selection，避免重复操作或视觉残留
selection.removeAllRanges();
}在上述示例中，当用户选择一段文本并点击“替换选中文本”按钮时，被选中的文本会被移除，然后一个带有黄色背景、黑色文本，并包含原文本及{{C1::...}}标记的<span>元素将插入到原选区的位置。
注意事项与进阶考量
- 兼容性： window.getSelection()和Range API在现代浏览器中具有良好的兼容性。对于IE 8及更早版本，可能需要使用document.selection和TextRange对象，但考虑到当前浏览器市场份额，通常可以忽略这些旧版本。
- 光标位置管理： 在执行替换操作后，光标（插入点）通常会定位在新插入内容的末尾。如果需要将光标定位到新内容的其他位置，或在特定情况下恢复到替换前的位置，需要额外使用Selection.collapse()或Range.setStart()/Range.setEnd()等方法来精确控制。
- 在富文本编辑器中的应用： 在更复杂的富文本编辑器（如nicEditor、TinyMCE、Quill等）中，它们通常会提供自己的API来处理选区和内容操作，以更好地管理DOM结构和保持编辑器的内部状态。直接操作window.getSelection()可能与编辑器的内部逻辑冲突。但在自定义的简单可编辑区域或作为理解编辑器底层原理的基础，这种原生方法非常有效。
- 安全性： 当使用innerHTML插入用户输入的内容时，需要警惕XSS（跨站脚本攻击）风险。如果selectedText可能包含来自不可信源的数据，应使用textContent或进行适当的HTML转义，以避免注入恶意脚本。在我们的示例中，selectedText是从DOM中提取的，通常是安全的，但如果{{C1::...}}中的内容是动态生成的，则需要注意。
- 处理复杂选区： 尽管Selection对象可以包含多个Range，但在大多数用户界面交互中，用户通常只选择一个连续的文本块。如果需要处理跨越多个不连续区域的复杂选区，需要遍历selection.rangeCount并对每个Range进行操作。
- 撤销/重做功能： 实现撤销/重做功能需要维护一个操作历史栈。每次进行替换操作时，都需要将操作前的状态和操作后的状态记录下来，以便用户可以回溯。
总结
通过window.getSelection()和Range对象，我们可以精确地控制用户在HTML内容区域中的文本选择，并实现对其内容的替换、修改或包装。这种原生JavaScript方法为构建自定义富文本编辑功能提供了坚实的基础，避免了对外部库的依赖，并加深了对浏览器DOM操作机制的理解。掌握这些API对于前端开发者处理复杂的文本交互逻辑至关重要。
