假设我有这个HTML元素：
<div id="parent">
Hello everyone! <a>This is my home page</a>
<p>Bye!</p>
</div>
用户使用鼠标选择了“主页”。
我希望能够确定他的选择从#parent的哪个字符开始（以及从#parent结尾处的哪些字符结束）。这应该即使他选择HTML标记也有效。（并且我需要它在所有浏览器中都能工作）
range.startOffset看起来很有前途，但它只是相对于范围的立即容器的偏移量，并且如果容器是文本节点，则仅是字符偏移量。
更新
如评论所指出，我的原始答案（下面）只返回选择的结尾或插入符位置。很容易调整代码以返回开始和结束偏移量；以下是一个示例：
function getSelectionCharacterOffsetWithin(element) {
var start = 0;
var end = 0;
var doc = element.ownerDocument || element.document;
var win = doc.defaultView || doc.parentWindow;
var sel;
if (typeof win.getSelection != "undefined") {
sel = win.getSelection();
if (sel.rangeCount > 0) {
var range = win.getSelection().getRangeAt(0);
var preCaretRange = range.cloneRange();
preCaretRange.selectNodeContents(element);
preCaretRange.setEnd(range.startContainer, range.startOffset);
start = preCaretRange.toString().length;
preCaretRange.setEnd(range.endContainer, range.endOffset);
end = preCaretRange.toString().length;
}
} else if ( (sel = doc.selection) && sel.type != "Control") {
var textRange = sel.createRange();
var preCaretTextRange = doc.body.createTextRange();
preCaretTextRange.moveToElementText(element);
preCaretTextRange.setEndPoint("EndToStart", textRange);
start = preCaretTextRange.text.length;
preCaretTextRange.setEndPoint("EndToEnd", textRange);
end = preCaretTextRange.text.length;
}
return { start: start, end: end };
}
function reportSelection() {
var selOffsets = getSelectionCharacterOffsetWithin( document.getElementById("editor") );
document.getElementById("selectionLog").innerHTML = "Selection offsets: " + selOffsets.start + ", " + selOffsets.end;
}
window.onload = function() {
document.addEventListener("selectionchange", reportSelection, false);
document.addEventListener("mouseup", reportSelection, false);
document.addEventListener("mousedown", reportSelection, false);
document.addEventListener("keyup", reportSelection, false);
};#editor {
padding: 5px;
border: solid green 1px;
}Select something in the content below:
<div id="editor" contenteditable="true">A <i>wombat</i> is a marsupial native to <b>Australia</b></div>
<div id="selectionLog"></div>在线示例：http://jsfiddle.net/TjXEG/900/
function getCaretCharacterOffsetWithin(element) {
var caretOffset = 0;
var doc = element.ownerDocument || element.document;
var win = doc.defaultView || doc.parentWindow;
var sel;
if (typeof win.getSelection != "undefined") {
sel = win.getSelection();
if (sel.rangeCount > 0) {
var range = win.getSelection().getRangeAt(0);
var preCaretRange = range.cloneRange();
preCaretRange.selectNodeContents(element);
preCaretRange.setEnd(range.endContainer, range.endOffset);
caretOffset = preCaretRange.toString().length;
}
} else if ( (sel = doc.selection) && sel.type != "Control") {
var textRange = sel.createRange();
var preCaretTextRange = doc.body.createTextRange();
preCaretTextRange.moveToElementText(element);
preCaretTextRange.setEndPoint("EndToEnd", textRange);
caretOffset = preCaretTextRange.text.length;
}
return caretOffset;
}
tinyMCE.execCommand('mceInsertContent', false, newContent);，我在这里找到了这个方法链接。但是还是感谢你的帮助！ - Travesty3element.document是针对IE 5和5.5的。 - Tim Down我知道这篇文章已经一年了，但是这篇文章在寻找光标位置的许多问题上是一个顶级搜索结果，我发现它很有用。
我试图使用Tim上面优秀的脚本，在可编辑div中将一个元素从一个位置拖放到另一个位置后找到新的光标位置。在Firefox和IE中它完美地工作，但是在Chrome中，拖动操作会突出显示拖动开始和结束之间的所有内容，这导致返回的caretOffset太大或太小（超过所选区域的长度）。
我添加了一些代码到第一个if语句中，以检查是否选择了文本并相应地调整结果。新语句如下。如果在此处添加此内容不当，请原谅我，因为这不是OP要做的事情，但正如我所说，与Caret位置相关的几个搜索将我带到了这篇文章上，所以它（希望）可能会帮助其他人。
带有添加行(*)的Tim的第一个if语句：
if (typeof window.getSelection != "undefined") {
var range = window.getSelection().getRangeAt(0);
var selected = range.toString().length; // *
var preCaretRange = range.cloneRange();
preCaretRange.selectNodeContents(element);
preCaretRange.setEnd(range.endContainer, range.endOffset);
caretOffset = preCaretRange.toString().length - selected; // *
}
start字符偏移和stop字符偏移）并突出显示该单词。请给予建议。 - Johnselected 变量后再减去它是否有特殊原因？如果 selected 是 0，那么减去 0 不会改变 caretOffset，是吗？ - Donnie D'Amatonull 减去某个值等同于使用 0（但不确定在所有 JavaScript 引擎中是否都是这样）。 :) - aleclarsonwindow.getSelection()在Safari上不起作用。我看到很多人都有这个问题，但目前还没有Safari的解决方案。 - KYin经过几天的实验，我找到了一种看起来很有前途的方法。由于selectNodeContents()不能正确处理<br>标签，我编写了一个自定义算法来确定contenteditable内每个node的文本长度。例如，要计算选择的开始位置，我将所有前置节点的文本长度相加。这样，我可以处理（多个）换行符：
var editor = null;
var output = null;
const getTextSelection = function (editor) {
const selection = window.getSelection();
if (selection != null && selection.rangeCount > 0) {
const range = selection.getRangeAt(0);
return {
start: getTextLength(editor, range.startContainer, range.startOffset),
end: getTextLength(editor, range.endContainer, range.endOffset)
};
} else
return null;
}
const getTextLength = function (parent, node, offset) {
var textLength = 0;
if (node.nodeName == '#text')
textLength += offset;
else for (var i = 0; i < offset; i++)
textLength += getNodeTextLength(node.childNodes[i]);
if (node != parent)
textLength += getTextLength(parent, node.parentNode, getNodeOffset(node));
return textLength;
}
const getNodeTextLength = function (node) {
var textLength = 0;
if (node.nodeName == 'BR')
textLength = 1;
else if (node.nodeName == '#text')
textLength = node.nodeValue.length;
else if (node.childNodes != null)
for (var i = 0; i < node.childNodes.length; i++)
textLength += getNodeTextLength(node.childNodes[i]);
return textLength;
}
const getNodeOffset = function (node) {
return node == null ? -1 : 1 + getNodeOffset(node.previousSibling);
}
window.onload = function () {
editor = document.querySelector('.editor');
output = document.querySelector('#output');
document.addEventListener('selectionchange', handleSelectionChange);
}
const handleSelectionChange = function () {
if (isEditor(document.activeElement)) {
const textSelection = getTextSelection(document.activeElement);
if (textSelection != null) {
const text = document.activeElement.innerText;
const selection = text.slice(textSelection.start, textSelection.end);
print(`Selection: [${selection}] (Start: ${textSelection.start}, End: ${textSelection.end})`);
} else
print('Selection is null!');
} else
print('Select some text above');
}
const isEditor = function (element) {
return element != null && element.classList.contains('editor');
}
const print = function (message) {
if (output != null)
output.innerText = message;
else
console.log('output is null!');
}* {
font-family: 'Georgia', sans-serif;
padding: 0;
margin: 0;
}
body {
margin: 16px;
}
.p {
font-size: 16px;
line-height: 24px;
padding: 0 2px;
}
.editor {
border: 1px solid #0000001e;
border-radius: 2px;
white-space: pre-wrap;
}
#output {
margin-top: 16px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./script.js" async></script>
<link href="./stylesheet.css" rel="stylesheet">
<title>Caret Position</title>
</head>
<body>
<p class="editor" contenteditable="true"><em>Write<br></em><br>some <br>awesome <b><em>text </em></b>here...</p>
<p id="output">Select some text above</p>
</body>
</html>document.activeElement无法正常工作，所以我使用了我正在处理的单个div。 - nreh calculateTotalOffset(node, offset) {
let total = offset
let curNode = node
while (curNode.id != 'parent') {
if(curNode.previousSibling) {
total += curNode.previousSibling.textContent.length
curNode = curNode.previousSibling
} else {
curNode = curNode.parentElement
}
}
return total
}
// after selection
let start = calculateTotalOffset(range.startContainer, range.startOffset)
let end = calculateTotalOffset(range.endContainer, range.endOffset)
#parent中选择了所有内容，他的选择将包括一些HTML标签（<a>和<p>）。 - Tom Lehman