首页  >  文章  >  web前端  >  如何确定用户选择在其父 HTML 元素内的开始和结束字符偏移量?

如何确定用户选择在其父 HTML 元素内的开始和结束字符偏移量?

Susan Sarandon
Susan Sarandon原创
2024-11-18 02:44:02348浏览

How Can I Determine the Start and End Character Offsets of a User Selection Within Its Parent HTML Element?

确定其父容器内范围的开始和结束偏移量

问题

给定一个 HTML 元素,如何确定字符偏移量在范围(用户选择)开始和结束的父容器内,即使选择跨越 HTML

解决方案

更新的响应:

要获取开始和结束偏移量:

function getSelectionCharacterOffsetWithin(element) {
  // Determine start and end offsets
  var start = 0;
  var end = 0;
  // Create ranges
  var range = getRangeAt(0);
  var preCaretRange = range.cloneRange();

  // Set start offset
  preCaretRange.selectNodeContents(element);
  preCaretRange.setEnd(range.startContainer, range.startOffset);
  start = preCaretRange.toString().length;

  // Set end offset
  preCaretRange.setEnd(range.endContainer, range.endOffset);
  end = preCaretRange.toString().length;

  // Return the object
  return { start: start, end: end };
}

原始回复:

提供的代码利用getSelection() 和 getRangeAt(0) 来检索选择。然后,它使用范围上的 toString() 方法计算元素内插入符号位置的偏移量。此方法仅提供结束偏移或插入符位置。

示例:

function getRangeCharacterOffsetWithin(element) {
  var range, sel;
  if ((sel = window.getSelection())) {
    range = sel.getRangeAt(0);
    range.collapse(false);
    prevRange = range.cloneRange();
    prevRange.selectNodeContents(element);
    prevRange.setEnd(range.endContainer, range.endOffset);
    return prevRange.toString().length;
  }
  return 0;
}

以上是如何确定用户选择在其父 HTML 元素内的开始和结束字符偏移量?的详细内容。更多信息请关注PHP中文网其他相关文章!

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