Question

我使用Range对象作为另一个Range对象的限制器，表示当前选择，这样就可以修剪所选范围内但超出限制范围边界的任何内容。为了比较两个Ranges的位置，我使用的是Range.compareBoundaryPoints（）函数，但结果毫无意义。

我正在使用的元素如下所示：

<p id="myBlock" contenteditable="true">
  Hello hello hello, this is a great big block of test text.
</p>

定义范围并按如下方式检索它们的位置关系：

var limitingRange = document.createRange();
limitingRange.selectNodeContents($('#myBlock')[0]);
var selectedRange = window.getSelection().getRangeAt(0).cloneRange(); //Use whatever method is supported by the browser to get the Range

var endToStart = limitingRange.compareBoundaryPoints(Range.END_TO_START, selectedRange);
var startToEnd = limitingRange.compareBoundaryPoints(Range.START_TO_END, selectedRange);
var startToStart = limitingRange.compareBoundaryPoints(Range.START_TO_START, selectedRange);
var endToEnd = limitingRange.compareBoundaryPoints(Range.END_TO_END, selectedRange);

然后我在文本中选择单词“this”并运行该功能。我的范围看起来像这样（我正在发明.start和.end表示法试图让我的描述更清晰）：

（limitingRange.start）Hello hello hello，（selectedRange.start）this（selectedRange.end）是一个很大的测试文本块。（limitingRange.end）

结果值为：
endToStart = -1
startToEnd = 1
startToStart = -1
endToEnd = 1

我对如何解释函数的结果感到困惑。根据规范看起来，例如，如果selectedRange的结尾在limitsRange开始之前，则endToStart应该包含-1，但显然不是这种情况。这是怎么回事？

Answer 1

我正在回答我自己的问题：输入正在发生的事情让我真正理解了函数的行为，这真的很奇怪。

a.compareBoundaryPoints（X_TO_Y，b）的结果是a.Y与b.X的比较。 -1如果a.Y在b.X之前，则为0;如果在同一位置，则为0;如果a.Y在同一位置，则为1。

所以在上面例子的endToStart中，limitsRange.start与selectedRange.end进行比较，-1表示limitsRange.start排在第一位。

startToEnd：limitsRange.end位于selectedRange.start之后，因此结果为1。
startToStart：limitsRange.start位于selectedRange.start之前，因此结果为-1。
endToEnd：limitsRange.end在selectedRange.end之后出现，所以结果为1

只留下一个问题：为什么这个功能会这样？常量的名称与人们直观期望的相反。

Range.compareBoundaryPoints（）生成奇怪的结果

1 个答案: