从 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,控制台,输出

它似乎只返回首先选择的元素，但就我而言，我需要获取所有元素。

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

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. onlyRange为您提供该范围的选择的开始和结束。它不会直接为您提供介于两者之间的所有元素。因此，如果用户选择了 2 个以上的段落，您需要自己弄清楚开始和结束之间到底有哪些段落。