javascript - 从 document.getSelection() 获取多个元素

Question

如何获取用户从 document.getSelection() 中选择的多个元素？

document.getElementById("hello").onclick = function() {

  selection = document.getSelection();

  if(selection) {
     console.log(selection.anchorNode.textContent);
  }

};

http://jsbin.com/qisawudofa/edit?html,js,console,output

它似乎只返回首先选择的元素，但在我的例子中我需要获取所有元素。

或者，有没有办法至少知道何时选择了多个元素？

Answer 1

您可能对 Ranges 最感兴趣组成选择。请记住，用户可以在整个页面上进行多项选择。选择的每个连续区域将获得其自己的 Range 实例。

您需要遍历所有范围。对于它们中的每一个，您都可以看到它的开始位置和结束位置:

if (selection) {
    for (i=0; i<selection.rangeCount; i++)  {
        range = selection.getRangeAt(i);
        if (range) {
            console.log(range.startContainer);
            console.log(range.endContainer);
        }
    }
}

但是对于代码中描述的示例，您还需要考虑两件事:

1. 只有当用户非常准确地选择一个段落时，您才会在startContainer 中获取该段落的节点。他们可能会在段落开始后甚至一个字符开始他们的开始选择，然后您将获得一个以该段落为父节点的文本节点。

2. Range 只为您提供该范围选择的开始和结束。它不会直接为您提供介于两者之间的所有元素。因此，如果用户选择了 2 个以上的段落，您将需要自己弄清楚哪些段落位于开始和结束之间。