从document.getSelection（）中获取多个元素

Question

How can I get the multiple elements a user has selected from 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

It seems to only return the element that was selected first, but in my case I need to get all of them.

Alternatively, is there a way to at least know when multiple elements have been selected?

Answer 1

You're probably most interested in the Ranges that make up the selection. Remember the user can make multiple selections all over the page. Each continuous area of selection will get its own instance of Range .

You'll need to iterate over all of the ranges. For each of them you can see where it starts and where it ends:

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

But for the example described in your code you'll need to consider two more things:

1. Only if the user very accurately selects a paragraph will you get the paragraph's node in startContainer . They might start their start selection even one character after the beginning of the paragraph and then you'll get a text node with the paragraph as its parent.

2. The Range only gives you the start and the end of the selection for that range. It doesn't directly give you all of the elements in between. So if the user selects more than 2 paragraphs, you'll need to figure out exactly which paragraphs are between start and end yourself.