使用javascript检测选择结束位置

我编写了一段代码，使用javascript检测选择的结束，并在结束位置放置一个标记。请参阅此JSFIDLE：

上述代码执行以下操作：

• 它正确地处理所有LTR脚本（例如英语）（正确地在末尾显示标记）
• 对于LTR脚本（例如英语），它处理选择是向前（从左/上到右/下）还是向后（从右/下到左/上）正确显示选择停止的标记（使用鼠标或键盘）
• 它使用

  getClientRects

  查找所有选择矩形边界，并使用hack检测选择方向（如果向后或不向后）。根据这两个信息，它将标记放置在末端

您可以毫无问题地尝试选择上面描述的英文脚本。唯一的问题是，当您尝试处理RTL脚本（例如阿拉伯语）时，标记会显示在所选RTL脚本的开头，而不是结尾（鼠标/键盘实际停止的地方）。这些问题导致：

• 在RTL脚本（阿拉伯语）中开始选择，在RTL脚本（阿拉伯语）中结束选择。这将在选择的开始处显示标记
• 在LTR脚本（英语）中开始选择，在RTL（阿拉伯语）脚本中结束选择。这将在RTL脚本选择的开始（而不是结束）显示标记

基本上，从任意位置（LTR或RTL）开始并以RTL脚本结束的选择是不正确的。正确处理任何其他情况（例如，以LTR或RTL开始，以LTR结束，甚至在途中通过RTL脚本）

问题是RTL脚本的流动方向是翻转的，因此后退就是前进，前进就是后退。这就是为什么我的代码不能正确处理RTL，而反向攻击被逆转了

---

我想到的一个解决方案是检测选择的最后一个字符，并查看它是否有RTL脚本，然后基于此翻转向后标志。我已经放置了一个函数来检测文本是否以RTL字符结尾（它在相同的JSFIDLE中）。它可能会帮助你，帮助我解决它：）

看看这是不是朝着正确的方向迈出的一步

它利用以下代码发布：

---

对于我来说，输入元素的行为不像RTL输入

dir=rtl

缺失？否，它应保持原样（即LTR，默认值）。如果设置dir=rtl，那么两个（rtl/LTR）脚本的整个过程都会被翻转。我在自己的代码中处理了（dir=rtl），但决定删除这个额外的大小写，以使代码更简单，并增加获得答案的机会。虽然您的解决方案/演示具有原始问题（rtl结束选择仍然颠倒），可能是由于innerHTML和if/else if/else，但我想我已经想到了获取选择文本的方法。我知道使用

getSelection

可以调用

toString

并获取文本。然后检查开头或结尾（取决于选择的方向），查看是否有RTL字符。我会试着去做，然后看看。非常感谢。

function getSelectionHtml() {
    var html = "";
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var container = document.createElement("div");
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                container.appendChild(sel.getRangeAt(i).cloneContents());
            }
            html = container.innerHTML;
        }
    } else if (typeof document.selection != "undefined") {
        if (document.selection.type == "Text") {
            html = document.selection.createRange().htmlText;
        }
    }
    return html;
}

if (lastCharRTL(getSelectionHtml()))
    $('#pointer').css({top: rects[n].top + 10, left: rects[n].left - 10}).show();
else if(backwards)
    $('#pointer').css({top: rects[0].top + 10, left: rects[0].left - 10}).show();
else
    $('#pointer').css({top: rects[n].top + 10, left: rects[n].right}).show();