DOM:确定锚节点或焦点节点是否在左侧

Question

此方法...

window.getSelection().anchorNode

。告诉我们文本的选择在哪里开始。

此方法...

window.getSelection().focusNode

。告诉我们文本选择在哪里结束。

由于文本可以选择从左到右或从右向左拖动，因此不会 INF anchorNode位于focusNode的左侧。

可以使用什么 DOM/JavaScript 方法来确定哪个引用的节点位于文本选择的左侧？

澄清：这是为了修复startContainer()方法（window.getSelection().getRangeAt(0).startContainer）的错误，因此这是一个无效的建议。

Answer 1

你

通常会在anchorNode上使用Node.compareDocumentPosition（），focusNode，"left"在道德上等同于DOCUMENT_POSITION_PRECEDING（当然，除非你有RTL文本）。我假设您实际上想知道文档中哪个排在第一位，而不是屏幕上的位置。这样的东西会起作用：

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

我为此使用的方法使用了这样一个事实，即将 DOM 范围的末尾设置为文档中比范围开始更早的点将折叠范围：

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;
}