Javascript 获取与主div（包含所有文本）相对应的选定文本范围_Javascript_Iphone_Html_Ios_Uiwebview

Javascript 获取与主div（包含所有文本）相对应的选定文本范围

javascript iphone html ios

Javascript 获取与主div（包含所有文本）相对应的选定文本范围,javascript,iphone,html,ios,uiwebview,Javascript,Iphone,Html,Ios,Uiwebview,我的要求是获取用户选择的文本相对于主div的开始和结束字符索引，比如content div。参见下面的示例代码。但是当我在web视图中选择Rich word时。它的开始字符索引和结束字符索引分别与span标记（即1和5）对应。然而，它应该是12和16 w.r.t内容分区 <html> <body> <div id="content" contenteditable="true" style="font-family: Times New Roman; co

我的要求是获取用户选择的文本相对于主div的开始和结束字符索引，比如content div。参见下面的示例代码。但是当我在web视图中选择Rich word时。它的开始字符索引和结束字符索引分别与span标记（即1和5）对应。然而，它应该是12和16 w.r.t内容分区

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

请帮帮我。

这里有一个改编自的答案。这个答案中的警告同样适用

演示：

代码：

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

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

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