javascript - js 文本划选?

Question

js 文本划选 第一次划取执行的时候没有问题，获取的起始位置是相对于div标签的。
执行之后会向html中添加span标签

第二次划取span标签后的文字的时候，获取的起始位置却是相对于span标签的
有没有方法每次获取的起始位置都是相对于div的？

Answer 1

你的问题似乎是关于在JavaScript中处理文本选择（文本高亮或划取）时，如何确保获取的起始位置始终基于特定的div元素，而不是基于其后添加的span元素。

当你在一个div内部添加span元素后，文本选择（例如，用户通过鼠标拖拽选择文本）的起始和结束位置将基于当前的DOM结构来确定。这意味着，如果选择的文本跨越了div和span的边界，那么起始和结束位置可能会相对于span，而不是原始的div。

为了解决这个问题，你可以采取以下策略：

1. 固定参考系：在进行文本选择之前，始终确保选择的文本基于同一个父元素（在这个例子中是div）。你可以通过移除或隐藏span元素来确保这一点，或者在选择完成后立即恢复它们。
2. 计算偏移量：如果你不能更改DOM结构，可以计算span元素相对于其div父元素的偏移量，并在选择时减去这些偏移量。这样，你可以将选择的位置转换回原始的div坐标系。
3. 使用Range和Selection API：JavaScript的Range和SelectionAPI提供了丰富的工具来操作文本选择。你可以使用这些API来获取选择的文本及其位置，并手动调整它们以基于div而不是span。

这是一个基本的示例，展示了如何使用Range和Selection API来获取选择的文本及其相对于特定元素的位置：

function getSelectedTextAndOffset(relativeToElement) {  const selection = window.getSelection();  if (selection.rangeCount > 0) {    const range = selection.getRangeAt(0);    const startOffset = range.startOffset;    const endOffset = range.endOffset;        // 找到相对于relativeToElement的起始和结束位置    const rect = relativeToElement.getBoundingClientRect();    const startRect = range.getBoundingClientRect();    const endRect = new Range().setStart(range.endContainer, range.endOffset).getBoundingClientRect();    // 计算偏移量    const startOffsetRelativeToDiv = startRect.left - rect.left;    const endOffsetRelativeToDiv = endRect.left - rect.left;    const selectedText = range.extractContents().textContent;    return {      text: selectedText,      startOffset: startOffsetRelativeToDiv,      endOffset: endOffsetRelativeToDiv    };  }  return null;}// 使用方法：const divElement = document.getElementById('yourDivId');const { text, startOffset, endOffset } = getSelectedTextAndOffset(divElement);console.log('Selected text:', text);console.log('Start offset relative to div:', startOffset);console.log('End offset relative to div:', endOffset);

请注意，这个示例是一个基本的起点，可能需要根据你的具体需求进行调整。特别是，它假设选择的文本都在一个单一的div内，并且没有考虑更复杂的DOM结构或跨多个元素的选择。