4

我将 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)你好你好你好，(selectedRange.start)this(selectedRange.end) 是一大块测试文本。(limitingRange.end)

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

我对如何解释函数的结果感到困惑。例如，根据规范，如果 selectedRange 的结束出现在限制范围的开始之前，endToStart 应该包含 -1，但显然情况并非如此。这里发生了什么？

4

1 回答 1

5

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

a.compareBoundaryPoints(X_TO_Y, b) 的结果是 aY 与 bX 的比较，如果 aY 在 bX 之前，则为 -1，如果它们在同一位置，则为 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

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

于 2012-11-13T12:06:16.420 回答