4

Range オブジェクトを、現在の選択範囲を表す別の Range オブジェクトのリミッターとして使用しています。これにより、選択範囲内にあるが制限範囲の境界外にあるものはすべて削除されます。2 つの範囲の位置を比較するために、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 の終わりが limitedRange の開始前に来る場合、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: limitedRange.end は selectedRange.start の後に
来るので、結果は 1 です。
endToEnd: limitedRange.end は selectedRange.end の後に来るため、結果は 1 になります。

質問だけを残してください。なぜこの関数はこのように動作するのですか? 定数の名前は、直感的に予想されるものとは逆です。

于 2012-11-13T12:06:16.420 に答える