Quiero guardar el rango y después de recargar la página, use esos valores para resaltar (con color amarillo, por ejemplo), pero el problema es que getRangeAt (0) no devuelve el rango correctamente. sus rangos se reinician después de cualquier etiqueta html, ¿cómo puedo resolver este problema?

 <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); } }); });

en este caso getRangeAt(0) devuelve 0,4 si selecciono "hola", luego si selecciono "John" devuelve 0,4 nuevamente.