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

Question

我从 another Whosebug 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();
    }
}

现在我想反其道而行之。我想获得相对于元素的选择范围，特别是 getSelectionRange 明确定义的 start 和 end 值。

我将如何使用与 setSelectionRange 中使用的类似方法编写相对于父元素的 "getSelectionRange" 方法，以便我可以将这两种方法用于 get/set 选择范围？

Answer 1

您可以使用 window.getSelection() 检索的 Selection 对象已经有一个 getRange 方法可以为您提供当前 select 的 range 对象.这个 range 对象与您提到的函数中使用的对象相同，包含有关当前 selected 内容的所有信息，这意味着开始节点、结束节点、startOffset、endOffset 等等。参见 https://developer.mozilla.org/en-US/docs/Web/API/Range

这几乎与你在这里的意思相反，如果你 select 页面中的内容，你可以这样做来获取和设置你 select 编辑的内容。

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

Answer 2

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

创建包含元素内容的新范围
将该范围的结束设置为您正在测量的范围的开始边界
在量程上调用toString()得到返回字符串的长度。这是您的起始偏移量。
获取在原始范围上调用toString()返回的字符串的长度，并将其添加到起始偏移量。这是你的结束偏移量。

查看 saveSelection 函数 here 示例。

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

Get range of selected text, relative to element

javascript

jquery

range

selection