How to get indexes of the selected html code with reference to the parent element

I have an editable div in which I want to get the character index of a selected HTML snippet.

Let's say my HTML code looks like:

<div id="editableDiv">
    <u>
        123
        <div>456</div>
        <div>789</div>
        <div>
            0
            <b>
                abc
            </b>
        </div>
        <div>
            1
            <b>
                def
            </b>
        </div>
    </u>
</div>

Text selection:

In this case new method should return start and end indices in currently used html code where index 0 indicates red rectangle, 3 indicates green rectangle:

I have tried to use Selection and Range objects where there is a anchorOffset and focusOffset properties that indicate an offset only for the last and first html nodes...

Any idea?