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

dom, javascript

Solution

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

Problem

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.

Original source