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

Question

我试图在包含HTML偏移量的内容可编辑div中得到插入符号。

例如：

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

在上面的示例中，插入符号偏移量应 5 （＆＃34; hello＆＃34;） + 1 （＆＃34 ;＆＃34;） + 6 （＆＃34;  ＆＃34;） = 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添加了special_div的ID，显然您可以将indexOf中的字符更改为您想要的任何内容。

HTML

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

的Javascript

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

JQuery的

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