首页  >  文章  >  web前端  >  如何获取容器元素内文本选择的开始和结束偏移量?

如何获取容器元素内文本选择的开始和结束偏移量?

DDD
DDD原创
2024-11-17 16:38:01290浏览

How to Get the Start and End Offsets of a Text Selection Within a Container Element?

获取文本选择相对于其容器的开始和结束位置

问题:

考虑以下 HTML:

<div>

假设用户从此元素中选择文本“home”。我们如何确定此选择相对于 #parent 容器的开始和结束偏移?

答案:

range.startOffset 属性似乎提供了所需的功能,但它仅表示直接容器内的偏移量。此外,如果容器是文本节点,它仅表示字符偏移量。

更新的代码:

这是正确返回开始的代码的更新版本和结束偏移量:

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

以上是如何获取容器元素内文本选择的开始和结束偏移量?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn