Question

我从another StackOverflow post找到了这个函数，它基于指定的开始和结束范围突出显示相对于父元素的文本。然而不幸的是，我不完全确定它是如何工作的。这是方法：

function setSelectionRange(el, start, end) {
    if (document.createRange && window.getSelection) {
        var range = document.createRange();
        range.selectNodeContents(el);
        var textNodes = getTextNodesIn(el);
        var foundStart = false;
        var charCount = 0, endCharCount;

        for (var i = 0, textNode; textNode = textNodes[i++]; ) {
            endCharCount = charCount + textNode.length;
            if (!foundStart && start >= charCount && (start < endCharCount || (start == endCharCount && i < textNodes.length))) {
                range.setStart(textNode, start - charCount);
                foundStart = true;
            }
            if (foundStart && end <= endCharCount) {
                range.setEnd(textNode, end - charCount);
                break;
            }
            charCount = endCharCount;
        }

        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (document.selection && document.body.createTextRange) {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(true);
        textRange.moveEnd("character", end);
        textRange.moveStart("character", start);
        textRange.select();
    }
}

现在我想做相反的事情。我希望获得相对于元素的选择范围，特别是start和end明确定义的getSelectionRange和setSelectionRange值。

如何使用0000e150 <pthread_mutexattr_setpshared>: e150: b573 push {r0, r1, r4, r5, r6, lr} e152: 4605 mov r5, r0 e154: 460c mov r4, r1 e156: 4616 mov r6, r2 e158: f7fd fa70 bl b63c <pthread_mutexattr-0xba> e15c: 4629 mov r1, r5中使用的类似方法编写相对于父元素的“getSelectionRange”方法，以便我可以使用这两种方法来获取/设置选择范围？

Answer 1

逆过程更简单：给定范围和父元素，过程为

创建一个包含元素内容的新范围
将该范围的结尾设置为您正在测量的范围的起始边界
通过在测量范围内调用toString()来获取返回的字符串的长度。这是你的起始偏移量。
通过在原始范围内调用toString()获取返回的字符串的长度，并将其添加到起始偏移量。这是你的最终抵消。

有关示例，请参阅saveSelection函数here。

Answer 2

您可以使用Selection检索的window.getSelection()对象已经有一个getRange方法，它会为您提供当前所选的range对象。此range对象与您提及的函数中使用的对象相同，并包含有关当前所选内容的所有信息，包括起始节点，结束节点，startOffset，endOffset等等。见https://developer.mozilla.org/en-US/docs/Web/API/Range

这与你所拥有的内容完全相反，这意味着如果你在页面中选择内容，你可以这样做来获取和设置你选择的内容。

var current_range = window.getSelection().getRangeAt(0);
window.getSelection().removeAllRanges();
window.getSelection().addRange(current_range);

获取相对于元素的所选文本范围

2 个答案: