У меня есть структура HTML, как это:

<div contenteditable="true">This is some plain, boring content.</div>

У меня также есть эта функция, которая позволяет мне установить позицию каретки в любом месте внутри div:

// Move caret to a specific point in a DOM element
function SetCaretPosition(object, pos)
{
    // Get key data
    var el = object.get(0); // Strip inner object from jQuery object
    var range = document.createRange();
    var sel = window.getSelection();

    // Set the range of the DOM element
    range.setStart(el.childNodes[0], pos);
    range.collapse(true);

    // Set the selection point
    sel.removeAllRanges();
    sel.addRange(range);
}

Этот код работает совершенно нормально, пока я не начну добавлять дочерние теги(span, b, i, u, strike, sup, sub) к div например

<div contenteditable="true">
    This is some <span class="fancy">plain</span>, boring content.
</div>

Все становится более сложным, когда эти дочерние теги заканчиваются собственными дочерними тегами, например

<div contenteditable="true">
    This is some <span class="fancy"><i>plain</i></span>, boring content.
</div>

По сути, что происходит, это то, чтоsetStart бросаетIndexSizeError когда я пытаюсьSetCaretPosition на индекс выше, чем начало дочернего тега.setStart работает только до первого дочернего тега.

Что мне нужно, это дляSetCaretPosition функция для обработки неизвестного числа этих дочерних тегов (и, возможно, неизвестного количества вложенных дочерних тегов), чтобы установка позиции работала так же, как если бы не было тегов.

Так что для этого:

<div contenteditable="true">This is some plain, boring content.</div>

и это:

<div contenteditable="true">
    This is <u>some</u> <span class="fancy"><i>plain</i></span>, boring content.
</div>

SetCaretPosition(div, 20); поместил бы каретку перед 'b' в 'скучном'.

Какой код мне нужен? Большое спасибо!