SYNCERのロゴ
アイキャッチ画像

Range.compareBoundaryPoints() - 他の範囲との位置関係を比較する

compareBoundaryPoints()は、Rangeのメソッドです。2つのRangeの位置関係を比較します。

概要

名前
compareBoundaryPoints
所属
Range
IDL
short compareBoundaryPoints(unsigned short how, Range sourceRange);
仕様書
https://dom.spec.whatwg.org/#dom-range-compareboundarypoints

説明

第1引数(how)には、比較方法を表す数値を指定します。この数値は定数に対応しています。

第2引数(sourceRange)には、比較対象のRangeを指定します。

START_TO_START (0)
自身の始点とsourceRangeの始点を比較する。
START_TO_END (1)
自身の終点とsourceRangeの始点を比較する。
END_TO_END (2)
自身の終点とsourceRangeの終点を比較する。
END_TO_START (3)
自身の始点とsourceRangeの終点を比較する。

返り値は下記の3種類です。同じドキュメント上にないなどしてRangeの位置関係が比較できない場合、エラーが発生します。

-1
自身のポイントは、sourceRangeのポイントよりも前にある。
0
自身のポイントとsourceRangeのポイントは、同じ位置にある。
1
自身のポイントは、sourceRangeのポイントよりも後にある。

デモ

Range.compareBoundaryPoints()のデモです。赤色のテキストを元のRange、あなたが選択した範囲を引数のRangeとしてメソッドを実行します。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<head>
<style>
body { word-break: break-all ; }
div#result { white-space: pre-wrap ; }
span#hoge { color: red ; }
</style>
</head>
<body>
<p>
	<label><input type="radio" name="how" checked>START_TO_START</label>
	<br><label><input type="radio" name="how">START_TO_END</label>
	<br><label><input type="radio" name="how">END_TO_END</label>
	<br><label><input type="radio" name="how">END_TO_START</label>
</p>
<div>
<p>1234567890<span id="hoge">1234567890</span>1234567890</p>
</div>
<hr>
<div id="result"></div>
<script>
var range1 = new Range() ;
var textNode = document.getElementById( "hoge" ).childNodes[0] ;	// 赤文字部分のテキストノード
range1.selectNodeContents( textNode ) ;

var how = 0 ;

document.onselectionchange = function () {
	document.getElementById( "result" ).textContent = "" ;

	var selection = getSelection() ;
	var range2 = selection.getRangeAt(0) ;

	var returnValue = range1.compareBoundaryPoints( how, range2 ) ;
	console.log( returnValue ) ;
	appendText( returnValue + "\n\n" ) ;

	appendText( "[元] range1(赤文字)のポイント(" + [ "始点", "終点", "終点", "始点" ][how] + ")は" + "\n" ) ;
	appendText( "[引数] range2(選択範囲)のポイント(" + [ "始点", "始点", "終点", "終点" ][how] + ")" + "\n") ;

	switch( returnValue ) {
		case -1 :
			appendText( "より前にあります。" ) ;
		break ;
		case 0 :
			appendText( "と同じ位置にあります。" ) ;
		break ;
		case 1 :
			appendText( "より後にあります。" ) ;
		break ;
	}
}

var elements = document.querySelectorAll( 'input[type="radio"]' ) ;

for( var i=0,l=elements.length; l>i; i++ ) {
	elements[i].onclick = function () {
		for( var i=0,l=elements.length; l>i; i++ ) {
			if ( elements[i].checked ) {
				how = [ Range.START_TO_START, Range.START_TO_END, Range.END_TO_END, Range.END_TO_START ][i] ;
				break ;
			}
		}
	}
}

function appendText ( text ) {
	document.getElementById( "result" ).appendChild( document.createTextNode( text ) ) ;
}
</script>
</body>
</html>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
9+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月16日 (月)
コンテンツを公開しました。