获取网页上用户选择的文本中包含的元素列表

Question

给出这样的页面：

 <p>
 <span class="1">Here's some text</span>
 <span class="2">that the user</span>
 <span class="3">could select.</span>
 </p>

如果用户选择整个句子（从“这里”到“选择”。），我想返回“ 1”和“ 3”。

如果用户选择句子的一部分（从跨度1中的“一些”到跨度2中的“ the”，我想返回“ 1”和“ 2”。

这里最好的方法是什么？

Answer 1

[javascript中没有高亮事件，因此解决方案将不会很简单，而将文本拆分为多个元素的事实会更加困难。您可以将document.selection用作the top answer to this similar question suggests，但是随后您仍然需要根据span元素的innerHTML解析返回的文本，这似乎很简单。

我认为，在这种情况下，您最好的选择是基本上使用现有的JS事件重新创建突出显示功能。这是一个幼稚的实现，缺少某些功能，例如双击选择和键盘选择，但是您明白了。]

const hLights = Array.from(document.querySelectorAll('.hlight'));
let active = false;
let hoveredEls = [];

window.addEventListener('mousedown', function() {
  active = true;
});

window.addEventListener('mouseup', function() {
  active = false;
  console.log(hoveredEls);
  hoveredEls = [];
});

hLights.forEach(el => {
  el.addEventListener('mousemove', function() {
    if (active && !hoveredEls.includes(el.id)) hoveredEls.push(el.id);
  });
  el.addEventListener('mouseenter', function() {
    if (active) {
      if(hoveredEls.includes(el.id)) {
        const idx = hoveredEls.findIndex(el => el === el.id);
        hoveredEls.splice(idx, 1);
      } else {
        hoveredEls.push(el.id);
      }
    }
  });
});
<p>
 <span id="1" class="hlight">Here's some text</span>
 <span id="2" class="hlight">that the user</span>
 <span id="3" class="hlight">could select.</span>
</p>