javascript - window.getSelection(); 获取鼠标选中文本后 给文本添加 span标签 实现高亮 第一次获取的时候 下标正常 加完span标签后 下标位置就不对了？

Question

window.getSelection(); 获取鼠标选中文本后 给文本添加 span标签 实现高亮 第一次获取的时候 下标正常 加完span标签后 下标位置就不对了

Answer 1

当你在网页中使用 window.getSelection() 来获取用户选中的文本，并尝试通过添加 span 标签来高亮这段文本时，可能会遇到下标位置变化的问题。这是因为当你向选中的文本节点添加新的 span 标签时，DOM 结构发生了变化，原有的节点和偏移量（offset）也随之改变。

要解决这个问题，你可以采取以下步骤：

1. 保存原始范围（Range）：首先，使用 getSelection() 获取 Selection 对象，并从该对象中获取 Range 对象。这个 Range 对象代表了用户选中的区域。
2. 创建新的节点：创建一个新的 span 元素，并设置所需的样式（例如，背景颜色以实现高亮）。
3. 提取文本内容：从原始的 Range 对象中提取文本内容。
4. 替换文本内容：使用提取出来的文本内容替换原始选中文本节点的内容。
5. 将新节点插入到DOM中：将新的 span 元素插入到原来选中文本的位置。
6. 调整范围：由于DOM结构已经改变，需要重新设置 Range 的起始和结束位置，以确保它们指向新的 span 元素。

以下是一个简化的示例代码，展示了如何实现这一过程：

// 获取选中的文本const selection = window.getSelection();if (selection.rangeCount > 0) {  const range = selection.getRangeAt(0);  // 创建新的 span 元素  const span = document.createElement('span');  span.style.backgroundColor = 'yellow'; // 设置高亮颜色  // 提取选中的文本  const textNode = range.extractContents();  const text = textNode.textContent;  // 将文本设置到新的 span 元素中  span.textContent = text;  // 将 span 元素插入到原始位置  range.insertNode(span);  // 重新设置范围以包括新的 span 元素  range.setStart(span, 0);  range.setEnd(span, span.childNodes.length);  // 更新选择以反映新的范围  selection.removeAllRanges();  selection.addRange(range);}

这段代码应该能解决你遇到的问题。注意，这种方法会改变原始选中文本的结构，因为它用一个新的 span 元素替换了原始文本节点。如果你的应用依赖于原始的DOM结构，那么你可能需要调整其他部分的代码来适应这种变化。