获取所选文本与主 div 的范围（包含所有文本）答案

【问题标题】：Get the selected text's range with respective to the main div(containing all the text)获取所选文本与主 div 的范围（包含所有文本）
【发布时间】：2013-02-07 12:29:02
【问题描述】：

我的要求是获取用户选择的文本相对于主 div 的开始和结束字符索引，比如说“内容”div。请参阅下面的示例代码。但是当我在网络视图中选择“丰富”一词时。它的开始和结束字符索引分别对应于“span”标签的位置，即1和5。而它应该是 12 和 16 w.r.t “内容” div。

<html>
<body>
    <div id="content" contenteditable="true" style="font-family: Times New Roman; color: #fff; font-size: 18;">
          This is <span style="background-color: yellow;">out</span> Rich Text Editing View
    </div>
</body>

目前使用的JavaScript函数m是

function getHighlightedString()
{
    var text = document.getSelection();
    startIndex = text.anchorOffset;
    endIndex = text.focusOffset;
    selectedText = text.anchorNode.textContent.substr(startIndex, endIndex - text.anchorOffset);
}

请帮帮我。

【问题讨论】：

标签： javascript iphone html ios uiwebview

【解决方案1】：

这是改编自this one 的答案。该答案中的相同警告也适用。

演示：http://jsfiddle.net/62Bcf/1/

代码：

function getSelectionCharacterOffsetsWithin(element) {
    var startOffset = 0, endOffset = 0;
    if (typeof window.getSelection != "undefined") {
        var range = window.getSelection().getRangeAt(0);
        var preCaretRange = range.cloneRange();
        preCaretRange.selectNodeContents(element);
        preCaretRange.setEnd(range.startContainer, range.startOffset);
        startOffset = preCaretRange.toString().length;
        endOffset = startOffset + range.toString().length;
    } else if (typeof document.selection != "undefined" &&
               document.selection.type != "Control") {
        var textRange = document.selection.createRange();
        var preCaretTextRange = document.body.createTextRange();
        preCaretTextRange.moveToElementText(element);
        preCaretTextRange.setEndPoint("EndToStart", textRange);
        startOffset = preCaretTextRange.text.length;
        endOffset = startOffset + textRange.text.length;
    }
    return { start: startOffset, end: endOffset };
}

【讨论】：

感谢@tim 的快速回复。我之前已经尝试过你的答案。但它没有给出正确的答案。对于上面的代码，对于“out”，相应的偏移量是 11 和 14，对于“Rich”，它是 16 和 20。这是不正确的。
@harshitgupta：原因是所有文本节点中的所有空白都计入总偏移量。如果您想要忽略未渲染空白的字符偏移，则需要更复杂的方法，例如我自己的Rangy TextRange module。一个更简单的解决方法是删除可编辑元素内文本开头之前的空格。另外，我刚刚更新的代码中有一个错误。
@TimDown 我已经在 3 天内阅读了你的 100 个答案，老兄，你太棒了。我将为您免费工作，请告诉我：P