查找父节点所选文本的范围

我想找到所选文本相对于父元素的范围。所以在这个<p>元素，即anchorOffset & focusOffset“狐狸”是[16,19]

<p>The quick brown fox jumps over the lazy dog.</p>

但如果我们添加一个<b>“fox”之前的标签，则值更改为 [1,4]。

<p>The quick <b>brown</b> fox jumps over the lazy dog.</p>

我最好的猜测是，索引计数从末尾开始</b>标签。但我希望它仍然显示原始值，而不管其中的 HTML<p>。为此，我尝试创建一个范围，但仍然无法弄清楚。以下是作为函数的代码。

function rangefun() {
  var range = document.createRange();
  var referenceNode = document.getElementsByTagName('P').item(0);
  range.selectNode(referenceNode);
  var selection = window.getSelection();
  var start = selection.anchorOffset;
  var end = selection.focusOffset;
  console.log("start: " + start);
}

下面是代码的修改版本，可以执行您想要的操作。

它需要两个anchor and extent的子节点<p>来自selection变量（即window.getSelection()).

这两个节点被传递到calculateOffset功能。对于每个节点，计算前面兄弟节点的文本长度之和。通过选择的相对偏移量（子节点中的偏移量）来增加总文本长度将产生start and end相对于的偏移量<p>文本长度。

function rangefun() {
  var selection = window.getSelection();
  var start = selection.anchorOffset;
  var end = selection.extentOffset;
  var anchorNode = selection.anchorNode;
  var extentNode = selection.extentNode;

  var startIndex = calculateOffset(anchorNode, start);
  var endIndex = calculateOffset(extentNode, end);
  console.log('start: ' + startIndex);
  console.log('end: ' + endIndex);
}

function calculateOffset(child, relativeOffset) {
  var parent = child.parentElement;
  
  // verify whether or not the correct parent element is selected, modify if necessary
  if (parent.tagName != 'P') {
    parent = parent.closest('p');
    child = child.parentElement;
  }
  var children = [];

  // add the child's preceding siblings to an array
  for (var c of parent.childNodes) {
    if (c === child) break;
    children.push(c);
  }

  // calculate the total text length of all the preceding siblings and increment with the relative offset
  return relativeOffset + children.reduce((a, c) => a + c.textContent.length, 0);
}