从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仅为您提供该Range选择的开始和结束。 它并不直接为您提供介于两者之间的所有元素。 因此，如果用户选择了超过2个段落，您需要自己确定哪些段落在开始和结束之间。