Javascript获取高亮文本的坐标

Question

我想获得突出显示文本的位置，但不是有界黄色矩形（使用range.getBoundingClientRect()）这里我在谈论图片中的红色区域意味着它有缩进。基本上我想保存选择区域并能够复制它们。我无法使用该技术来保存和恢复Range对象。

以下是我要做的事情：

function addMarkerOnSelection(){
  var range = window.getSelection().getRangeAt(0);
  var rect = range.getBoundingClientRect();
  var scrolltop = jQuery('body,html').scrollTop();
  //var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
  var marker = document.createElement('div');
  marker.style.position = 'absolute';
  marker.style.display='block';
  marker.style.left = rect.left + 'px';
  marker.style.top = scrolltop + rect.top + 'px';
  marker.style.height = rect.bottom-rect.top + 'px';
  marker.style.width = rect.right-rect.left + 'px';
  marker.style.border='1px solid black';
  marker.style.background='yellow';
  marker.style.opacity = 0.5;
  document.body.appendChild(marker);
}

您可以尝试使用Google文档，尝试不突出显示多行文字并添加评论。它们正确地包裹高光区域。

我有另一种方法，使用Range.surroundContents我能够使用元素包装内容并按预期方式工作。但是如何在不保存整个文本内容的情况下保存它？

function surround(){
  var range = window.getSelection().getRangeAt(0);
  var marker = document.createElement('span');
  marker.style.border='1px solid black';
  marker.style.background='yellow';
  marker.style.opacity = 0.5;
  range.surroundContents(marker);
};