如何准确确定 HTML 元素内的字符偏移？

计算相对于父容器的范围开始和结束偏移

假设您遇到如下 HTML 元素：

<div> <p>用户用鼠标选择文本“home”。确定“#parent”元素内的字符偏移量是一项常见任务，尤其是在选择 HTML 标记时。</p>
<p>虽然“range.startOffset”属性提供相对于直接容器的偏移量，但它仅限于字符偏移量当容器是文本节点时。为了克服这个限制，我们提出了一个更新的解决方案：</p>
<pre class="brush:php;toolbar:false">function getSelectionCharacterOffsetWithin(element) {
  var start = 0;
  var end = 0;
  var doc = element.ownerDocument || element.document;
  var win = doc.defaultView || doc.parentWindow;
  var sel;
  if (typeof win.getSelection != "undefined") {
    sel = win.getSelection();
    if (sel.rangeCount > 0) {
      var range = win.getSelection().getRangeAt(0);
      var preCaretRange = range.cloneRange();
      preCaretRange.selectNodeContents(element);
      preCaretRange.setEnd(range.startContainer, range.startOffset);
      start = preCaretRange.toString().length;
      preCaretRange.setEnd(range.endContainer, range.endOffset);
      end = preCaretRange.toString().length;
    }
  } else if ((sel = doc.selection) && sel.type != "Control") {
    var textRange = sel.createRange();
    var preCaretTextRange = doc.body.createTextRange();
    preCaretTextRange.moveToElementText(element);
    preCaretTextRange.setEndPoint("EndToStart", textRange);
    start = preCaretTextRange.text.length;
    preCaretTextRange.setEndPoint("EndToEnd", textRange);
    end = preCaretTextRange.text.length;
  }
  return { start: start, end: end };
}

为了演示更新的方法，我们初始化事件侦听器以捕获选择更改并更新页面上的日志元素：

function reportSelection() {
  var selOffsets = getSelectionCharacterOffsetWithin(
    document.getElementById("editor")
  );
  document.getElementById("selectionLog").innerHTML =
    "Selection offsets: " + selOffsets.start + ", " + selOffsets.end;
}

window.onload = function () {
  document.addEventListener("selectionchange", reportSelection, false);
  document.addEventListener("mouseup", reportSelection, false);
  document.addEventListener("mousedown", reportSelection, false);
  document.addEventListener("keyup", reportSelection, false);
};

此代码使您能够准确确定 HTML 元素中用户选择的字符偏移量，即使在选择 HTML 标签时也是如此。