在内容可编辑div中获取插入符偏移量以包含HTML偏移量

Question

我试图在包含HTML偏移量的内容可编辑div中使插入符号脱颖而出。

例如：

<div contenteditable=true>
   hello &nbsp;|(caret is here)
</div>

在上面的示例中，插入标记偏移量应为5 （“ hello”） + 1 （“”） + 6 （“   ”） = 12

相反，我将offset=7为  被转换为空格并计为1。

请参阅下面的代码：

var range1 = window.getSelection().getRangeAt(0),
range2 = range1.cloneRange();
range2.selectNodeContents(target);
range2.setEnd(range1.endContainer, range1.endOffset);
return range2.toString().length;

任何帮助，将不胜感激！

Answer 1

您需要获取div的HTML，而不是文本。 在此示例中，我将div的ID添加为special_div ，显然，您可以将indexOf的字符更改为所需的任何字符。

HTML

<div id="special_div" contenteditable=true>
hello &nbsp;|(caret is here)
</div>

Java脚本

document.getElementById('special_div').innerHTML.indexOf('|');

jQuery查询

$('#special_div').html().indexOf('|');