Tengo una estructura HTML como esta:

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

También tengo esta función que me permite establecer la posición del cursor en cualquier lugar que desee dentro del 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);
}

Este código funciona completamente bien hasta que empiezo a agregar etiquetas secundarias(span, b, i, u, strike, sup, sub) a la div por ej.

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

Las cosas se vuelven más complicadas cuando estas etiquetas secundarias terminan con sus propias etiquetas secundarias, p.

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

Esencialmente, lo que pasa es quesetStart arroja unIndexSizeError cuando trato deSetCaretPosition a un índice más alto que el inicio de una etiqueta secundaria.setStart solo funciona hasta que alcanza la primera etiqueta secundaria.

Lo que necesito es para elSetCaretPosition función para manejar un número desconocido de estas etiquetas secundarias (y potencialmente una cantidad desconocida de etiquetas secundarias anidadas) para que establecer la posición funcione de la misma manera que si no hubiera etiquetas.

Entonces para ambos esto:

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

y esto:

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

SetCaretPosition(div, 20); colocaría el cursor antes de la 'b' en 'aburrido'.

¿Cuál es el código que necesito? ¡Muchas gracias!