问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

js 文本划选?

头像
失落的鼠标垫
    291333
    头像
    陟上晴明
      21.4k144991

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

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

      前端javascript
      阅读 362
      avatarAI BotBETA

      你的问题似乎是关于在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结构或跨多个元素的选择。

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题