javascript – 获取与主div相对应的所选文本范围(包含所有文本)
作者：互联网
我的要求是获取用户相对于主div选择的文本的开始和结束字符索引,让我们说“content”div.请参阅下面的示例代码
但是当我在网页视图中选择“Rich”字样时.它的开始和结束字符索引分别对应于“span”标记的位置,即1和5.而它应该是12和16 w.r.t“content”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函数是
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 };
}
标签：html,javascript,ios,iphone,uiwebview 来源： https://codeday.me/bug/20190725/1535716.html