Как получить позицию курсора в тексте внутри contenteditable, исключая теги?

Question

Предположим, у меня есть html код внутри contenteditable div:

<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.

Предположим, я поставил курсор внутри слова "итали c".

Как получить позицию курсора без учета тегов?

Upd.

Я хочу сделать какое-то отображение между текстовыми и встроенными тегами. Например, я хочу получить что-то вроде этого:

[
    {
        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 ():