I want to save the range and after reload of page use those values for highlighting ( with yellow color for ex.) but the problem is getRangeAt(0) does not return range correctly. it's ranges restart after any html tags, how can i solve this problem?

<p id="content">
  hello <br> John 
</p>

document.addEventListener("selectionchange", () => {
  $("#content").bind("touchend mouseup", function() {
    var t = window.getSelection();
    var range=t.getRangeAt(0);
    var text=t.toString();
                    
    if(text! = "") {
      var rect = range.getBoundingClientRect();
      var start=range.startOffset;
      var end=range.endOffset;
      console.log(start, ' = ', end);
    }
  });
});

in this case getRangeAt(0) return 0,4 if i select "hello", then if i select "John" it returns 0,4 again .