my html page contain this line

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

and my Javascript code this line

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

When i select

the img is his enter image description here

But when i selecte from the span tag,its img is as follows

the img is his enter image description here

The startOffset is the same when I select start but when I select from the span tag the startOffset becomes 0 but I have to count it with its parent string