如何在内容可编辑的不包含标签的文本中获取光标位置？

Question

假定我在contenteditable div中具有此html代码：

<div contenteditable>This is an example of some <b>bold</b> and <i>italic</i> and normal text.</div>

我们在浏览器中看到此文本（带有剥离的标签）：

This is an example of some bold and italic normal text.

假设我将光标放在“斜体”一词中。

如何获得不计算标签的光标位置？

更新

我想在文本和内联标签之间进行某种映射。例如，我想要这样的东西：

[
    {
        content: 'This is an example of some ', 
        start: 0,
        end: 27,
    },
    {
        content: 'bold',
        type: 'bold',
        start: 28,
        end: 31, 
    },
    {
        content: ' and',    
        start: 32,
        end: 35,    
    },
    {
        content: 'italic',
        type: 'italic',
        start: 36,
        end: 41, 
    },
    {
        content: ' and normal text.',       
        start: 42,
        end: 58, 
    },
]

Answer 1

您应该尝试使用：window.getSelection()

window.getSelection（）的结果：

window.getSelection()