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

我的要求是获取用户选择的文本相对于主div的开始和结束字符索引，可以说“内容” DIV。请参阅以下示例代码。但是，当我在Web视图中选择“Rich”字时。它的开始和结束字符索引分别与“span”标签的位置即1和5相对应。而它应该是12和16 w.r.t“content”div。获取与主div（包含所有文本）相关的选定文本范围

功能M使用在目前的JavaScript

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

是

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

请帮助我。

来源

2013-02-07 harshitgupta

下面是从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 }; 
}

来源

2013-02-07 12:38:12

感谢的快速反应，@tim。我已经尝试过你的答案。但它没有给出正确的答案。对于上面的代码，“out”各自的偏移量分别为11和14，而“Rich”则是16和20.这是不正确的。 – harshitgupta

@harshitgupta：其原因是所有文本节点中的所有空白都计入总偏移量。如果您想要字符偏移忽略空白空白，则需要更复杂的方法，例如我自己的[Rangy TextRange模块]（http://code.google.com/p/rangy/wiki/TextRangeModule）。更简单的解决方法是删除可编辑元素内部文本开头之前的空白。此外，我刚刚更新的代码中存在错误。 –

非常感谢@Tim更新后的代码就像魅力一样... – harshitgupta

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

回答

相关问题