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");