DOM: determine if the anchorNode or focusNode is on the left side

Question

This method...

window.getSelection().anchorNode

...tells us where the selection of text STARTS.

This method...

window.getSelection().focusNode

...tells us where the selection of text ENDS.

Since text can be selecting dragging left-to-right or right-to-left this does not INFER that the anchorNode is to the left of the focusNode.

What DOM/JavaScript method can be used to determine which referenced node is on the LEFT side of the text selection?

Clarification: this is to fix the bug for the startContainer() method (window.getSelection().getRangeAt(0).startContainer) and thus that is an invalid suggestion.

Answer 1

You would usually use Node.compareDocumentPosition() on anchorNode and focusNode, "left" is the moral equivalent of DOCUMENT_POSITION_PRECEDING (unless you have an RTL text of course). I assume that you actually want to know which comes first in the document and not the position on screen. Something like this will work:

let selection = window.getSelection();
let position = selection.anchorNode.compareDocumentPosition(selection.focusNode);
if (position & Node.DOCUMENT_POSITION_FOLLOWING)
  alert("Left-to-right selection");
else if (position & Node.DOCUMENT_POSITION_PRECEDING)
  alert("Right-to-left selection");
else
  alert("Only one node selected");

Answer 2

A method I've used for this uses the fact that setting the end of a DOM Range to be at an earlier point in the document than the start of the range will collapse the range:

function isSelectionBackwards() {
    var backwards = false;
    if (window.getSelection) {
        var sel = window.getSelection();
        if (!sel.isCollapsed) {
            var range = document.createRange();
            range.setStart(sel.anchorNode, sel.anchorOffset);
            range.setEnd(sel.focusNode, sel.focusOffset);
            backwards = range.collapsed;
            range.detach();
        }
    }
    return backwards;
}