我们希望选中文本 "is a simple"，然后将其包裹在 <em> 标签中，期望的结果是：
<p>This <em>is a </em><strong><em>simple</em></strong> test</p>
如果直接使用 range.surroundContents，可能会因为选区跨越 <strong> 标签而导致问题。一种常见的错误做法是尝试修改 startContainer 和 endContainer 的 textContent，但这会导致文本选区重置到 startContainer 的起始位置。
解决方案：提取、遍历、重构
为了解决这个问题，我们可以采取以下步骤：
- 提取选区内容： 使用 activeRange.extractContents() 方法将选区中的所有节点提取出来。
- 遍历子节点： 遍历提取出的 rangeContents 的 childNodes 属性，即选区内的所有子节点。
- 构建新的 HTML 字符串： 根据每个节点的类型（文本节点、元素节点等），构建新的 HTML 字符串。
- 插入新的 HTML 字符串： 使用 activeRange.insertNode(activeRange.createContextualFragment(rangeHTML)) 将新的 HTML 字符串插入到原来的位置。
以下是一个示例代码：
document.getElementById('replace').addEventListener('mousedown', e => {
e.preventDefault();
const selection = window.getSelection(),
activeRange = selection.getRangeAt(0);
const rangeContents = activeRange.extractContents();
let rangeHTML = '<em>'; // 添加包裹标签
rangeContents.childNodes.forEach(node => {
if(node.nodeName == '#text')
rangeHTML += node.textContent;
else
rangeHTML += node.outerHTML;
});
rangeHTML += '</em>'; // 添加包裹标签
activeRange.deleteContents(); //删除原来的内容
activeRange.insertNode(activeRange.createContextualFragment(rangeHTML));
});在这个例子中，我们首先提取选区内容，然后遍历每个节点。如果节点是文本节点，我们直接将其文本内容添加到 rangeHTML 字符串中；如果节点是元素节点，我们将其 outerHTML 添加到 rangeHTML 字符串中。最后，我们将 rangeHTML 字符串插入到原来的位置，并添加了 <em> 标签包裹选区。
代码解释：
- activeRange.extractContents(): 从文档中移除选区的内容，并返回一个 DocumentFragment 对象，包含被移除的内容。
- rangeContents.childNodes: 返回一个 NodeList，包含 DocumentFragment 中的所有子节点。
- node.nodeName: 返回节点的名称。文本节点的名称是 #text。
- node.textContent: 返回文本节点的内容。
- node.outerHTML: 返回元素节点的 HTML 代码，包括标签本身。
- activeRange.deleteContents(): 删除选区的内容。
- activeRange.insertNode(): 将一个节点插入到选区的起始位置。
- activeRange.createContextualFragment(): 将一个 HTML 字符串转换为一个 DocumentFragment 对象。
完整示例代码
<!DOCTYPE html>
<html>
<head>
<title>Range Manipulation</title>
<style>
span{
padding: 0.5rem 1rem;
background: #CCC;
}
</style>
</head>
<body>
<p>This is a <strong>simple</strong> test</p>
<br>
<span id="replace">Replace Selection</span>
<script>
document.getElementById('replace').addEventListener('mousedown', e => {
e.preventDefault();
const selection = window.getSelection(),
activeRange = selection.getRangeAt(0);
const rangeContents = activeRange.extractContents();
let rangeHTML = '<em>'; // 添加包裹标签
rangeContents.childNodes.forEach(node => {
if(node.nodeName == '#text')
rangeHTML += node.textContent;
else
rangeHTML += node.outerHTML;
});
rangeHTML += '</em>'; // 添加包裹标签
activeRange.deleteContents(); //删除原来的内容
activeRange.insertNode(activeRange.createContextualFragment(rangeHTML));
});
</script>
</body>
</html>注意事项
- 在插入新的 HTML 字符串之前，务必删除原来的选区内容，避免重复。
- 在遍历子节点时，需要根据实际情况处理不同类型的节点，例如注释节点、属性节点等。
- 该方法适用于需要对选区内容进行复杂操作的场景，例如添加样式、修改属性等。
- 此方法会删除原来的选区，如果需要保留选区，需要手动设置。
总结
通过提取选区内容，遍历子节点，构建新的 HTML 字符串，然后将新的 HTML 字符串插入到原来的位置，我们可以有效地解决跨多标签的文本选区处理问题，避免文本范围错乱，并实现更灵活的 DOM 操作。该方法的核心在于精确控制每个节点的处理方式，从而确保最终结果的正确性。
