我的要求是获取用户选择的文本相对于主 div 的开始和结束字符索引，比方说“content”div。请参阅下面的示例代码。 但是当我在 WebView 中选择“Rich”这个词时。它的开始和结束字符索引分别对应于“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);
}
请帮帮我。
最佳答案
这是改编自 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 };
}
关于javascript - 获取所选文本相对于主 div 的范围(包含所有文本)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14751144/