mi página html contiene esta línea

 <p id='str'> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam repellat iste accusantium laboriosam rem commodi, quisquam libero minima. Quo neque dolore<span style="background-color: yellow;">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur, totam.</span> ratione fuga magni accusantium dolorum culpa, dolorem quasi atque voluptates illo, facilis magnam temporibus quam iste est voluptatum, quisquam optio? Inventore laborum, repellat quaerat ipsum aspernatur ab perspiciatis modi. </p>

y mi código Javascript esta línea

 let str = document.getElementById('str'); str.addEventListener('mouseup',(e)=>{ let range = window.getSelection().getRangeAt(0); console.log("startOffset" ,range.startOffset); })

cuando selecciono

el img es su descripción de la imagen ingrese aquí

Pero cuando selecciono de la etiqueta span, su img es la siguiente

el img es su descripción de la imagen ingrese aquí

El startOffset es el mismo cuando selecciono inicio, pero cuando selecciono de la etiqueta span, el startOffset se convierte en 0, pero tengo que contarlo con su cadena principal.