javascript - Range.compareBoundaryPoints() 产生奇怪的结果

Question

我将一个 Range 对象用作表示当前选择的另一个 Range 对象的限制器，这样任何在选定范围内但在限制范围边界之外的内容都会被 trim 掉。为了比较两个范围的位置，我使用了 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)

结果值是:
结束到开始= -1
开始到结束= 1
开始到开始= -1
endToEnd = 1

我对如何解释函数的结果感到困惑。根据规范，例如，如果 selectedRange 的末尾出现在 limitingRange 的开始之前，endToStart 似乎应该包含 -1，但显然情况并非如此。这是怎么回事？

Answer 1

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

a.compareBoundaryPoints(X_TO_Y, b) 的结果是 a.Y 与 b.X 的比较。 -1 如果 a.Y 在 b.X 之前，如果它们在同一位置则为 0，如果在之后则为 1。

因此在上例的 endToStart 中，将 limitingRange.start 与 selectedRange.end 进行比较，-1 表示 limitingRange.start 在前。

startToEnd:limitingRange.end在selectedRange.start之后，所以结果为1。
startToStart:limitingRange.start先于selectedRange.start，所以结果为-1。
endToEnd:limitingRange.end在selectedRange.end之后，所以结果为1

只留给我一个问题:为什么这个函数会这样？常量的名称与人们的直觉预期相反。