TextRangeオブジェクトの使用

  • [アーティクル]
Using the TextRange Object Using the TextRange Object *
*前のトピック: ダイナミック コンテント
*次のトピック: ドキュメントのテキストを検索する

TextRangeオブジェクトの使用

innerText/innerHTMLプロパティやouterText/outerHTMLプロパティや、今までのセクションで説明したメソッドが使えれば、ほとんどのユーザーは満足するだろう。しかし、ここでは"テキストレンジ"オブジェクトを使い、テキスト処理のさらなる応用について説明する。TextRangeオブジェクトでは、次の処理が行える。

ここでは、ダイナミックコンテントのもっと高度な使い方を説明する。それは"テキストレンジ"オブジェクトを使ったテキスト操作である。TextRangeオブジェクトでは、次の処理が行える。

  • 指定したエレメントや位置にテキストを配置する。
  • ドキュメント中で単語や文字を検索する。
  • 論理単位によってテキストを移動させる。
  • プレーンテキストとHTMLテキストに読み書きアクセスを許可する。

この機能は、Win32®プラットフォーム以外ではサポートされていない。Internet Explorerのクロスプラットフォーム互換性情報についてはMicrosoft Knowledge Baseの記事番号 Q172976 を参照のこと。

TextRangeオブジェクトの概要

テキストレンジ オブジェクトは、Dynamic HTMLの高度な機能の1つであり、テキストの検索や選択など、ダイナミックコンテントに関する便利な作業を実行できる。テキストレンジを使うと、ドキュメント中から文字、単語、文を選択して取得することができる。TextRangeオブジェクトは抽象的なオブジェクトであり、HTMLドキュメントに表示されるテキストのストリームについて、その始点と終点を作成する。 

<HTML>
<BODY>
<H1>Welcome</H1>
<CENTER><H2>Overview<H2></CENTER>
<P>Be sure to <B>Refresh</B> this page.</P>
</BODY>
</HTML>

例えば、上記のドキュメントで、BODYに対してテキストレンジを作成する場合、テキストレンジの始点はBODYエレメント内で最初のテキスト コンテントであり、その終点はBODYエレメント内の最後のテキスト コンテントとなる。また、このテキストレンジには、プレーンテキストとして"Welcome Overview Be Sure to Refresh this page."が含まれている。

TextRangeオブジェクトで何ができるのか?

TextRangeオブジェクトによるテキスト操作には2つある。まず、テキストレンジを作成するために、そのレンジとするテキストの始点と終点を囲むことである。次に、メソッドをテキストレンジに適用したり、ドキュメントの他の場所で使えるようにテキストのコピーを作成することである。いったんテキストレンジが作成されると、テキストの検索や選択が行え、テキストのコピーが作られ、ドキュメントのどこからでもこれを利用できる。

TextRangeオブジェクトで使えるプロパティやメソッドについては、DHTMLリファレンスのTextRangeオブジェクトを参照すること。

TextRangeオブジェクトの位置指定

各テキストレンジは始点と終点を持っていて、TextRangeオブジェクトによって囲まれたテキストの選択範囲が定義されている。新しいテキストレンジを作成すると、デフォルトでは、コンテント全体がテキストレンジとなる。move、moveStart、moveEndなどのメソッドを使うと、テキストレンジの範囲を変更できる。

特別なエレメントやページ上の座標に関してTextRangeオブジェクトを指定できる上記以外のメソッドがある。例えば、moveToElementTextメソッドは、指定したエレメント内のテキストを含むように、範囲の始点または終点を移動させる。また、moveToPointメソッドは、ユーザーがマウスをクリックした位置にテキストレンジを指定する。そのx座標とy座標は、window.eventオブジェクトで調べられる。この指定された位置から、単語、文、またはtextEdit（TextRangeオブジェクトで使用可能なすべて）全体を囲むように拡大することもできる。 

<HTML><HEAD>
<TITLE>moveToPoint Example</TITLE>
<script>
function selectMe() {
var r=document.body.createTextRange();
r.moveToPoint(window.event.x, window.event.y);
r.expand("word");
r.select();
}
</script>
</HEAD>
<BODY>


<H1 id=myH1 onclick=selectMe()>Click on a word and it will highlight</H1>


</BODY></HTML>

BODY、TEXTAREA、BUTTONエレメントのcreateTextRangeメソッドによって、TextRangeオブジェクトが作成される。また、ユーザーがセレクションを作ることで、テキストレンジを作成することもできる。selectionオブジェクトのcreateRangeメソッドによって、テキストレンジを返す。createTextRangeを使って作成したレンジと同様、このレンジに同じメソッドとプロパティが使える。

BODYにTextRangeオブジェクトを作成すると、TEXTAREAやBUTTON内のコンテントを含められない。なお、これらのエレメントの範囲外に移動するためにTEXTAREAやBUTTONのテキストレンジの始点や終点を変更することもできない。isTextEditやparentTextEditなど、これらのエレメントにも適用できるプロパティを使えば、階層を移動できる。ドキュメントにTEXTAREAがある場合、BODYオブジェクトのcreateTextRangeメソッドによって、ユーザーが実際にクリックした位置を検索できなくなる。次に、この場合の処理を示す。 

<HTML><HEAD>
<TITLE>moveToPoint Examplelt;/TITLE>
<script for=document event=onclick>
var r
if(window.event.srcElement.isTextEdit)
{
r=window.event.srcElement.createTextRange();
}else{
var el=window.event.srcElement.parentTextEdit;
r=el.createTextRange();
}
r.moveToPoint(window.event.x, window.event.y);
r.expand("word");
r.select();
</script>
</HEAD>
<BODY>


<H1 id=myH1>Click on a word and it will highlight</H1>


<TEXTAREA>
There's text in this element too that you could click on
</TEXTAREA>


</BODY></HTML>

TextRangeオブジェクトのコンテントを取得する

TextRangeオブジェクトのコンテントは、TextRangeオブジェクトのtextプロパティやhtmlTextプロパティによって読み出すことができる。textプロパティは読み書き可能なプロパティで、TextRangeオブジェクトで囲まれたテキストを置き換える点が、エレメント オブジェクトのinnerTextプロパティと似ている。

htmlTextプロパティは読み出し専用のプロパティであり、TextRangeオブジェクト内のHTMLタグを調べる。テキストレンジにリッチHTMLコンテントを追加するには、pasteHTMLメソッドを使用する。テキストレンジにHTMLテキストを貼り付けることができるが、pasteHTMLメソッドではinnerHTMLプロパティやouterHTMLプロパティのようにドキュメントの階層を保存できない。しかし、pasteHTMLは、レンジに間違ったタグや不適切なタグを貼り付ければ、失敗しないが、ドキュメントには期待すした結果は得られない。HTMLフラグメントを貼り付けると、そのフラグメント以降のテキストいぇエレメントに影響しないようにフラグメントは自動的にクローズされる。例えば、スクリプトがそのドキュメントのallコレクションの順番による場合、pasteHTMLメソッドの後に、document.allコレクション内のsourceIndexは異なるエレメントに指定される。

レンジの比較

エレメント内のテキストの異なる位置に別々に同時にアクセスすれば、一度に複数のテキストレンジを作成することができる。また、duplicateメソッドを利用すると、テキストレンジをコピーできる。オリジナルのテキストレンジに一時的にアクセスする場合には役立つが、オリジナルのテキストレンジを再作成することもリストアすることもできない。isEqualメソッドやinRangeメソッドを使えば、複数のテキストレンジを比較することができる。

オブジェクトモデルによって作成されたテキストレンジは保持されないので、コントロールが残っていようと再作成する必要がある。例えば、イベントハンドラで作成されたテキストレンジは、イベントハンドラが返されると破棄される。

inRangeメソッドを使用すると、あるテキストレンジ全体が他のテキストレンジに包含されているかどうかを調べられる。isEqualメソッドを使用すると、2つのテキストレンジが同じかどうかを調べられる。もし、比較した始点と終点が同一であるならば、それらは同じテキストレンジである。なお、同一のテキストレンジどうしは常に他のテキストレンジ内にあるとみなされ、inRangeメソッドはtrueを返すことに注意すること。

setEndPointメソッドを使うと、2つのテキストレンジについてその終点（あるいは始点）を同じに設定することができる。このメソッドは2つのパラメータを必要とする。1つは転送される終点を表す文字列、もう1つはソースの終点からとられるレンジである。次の例では、レンジの終点を"r1"、始点を"r2"に設定している。 

r1.setEndPoint( "StartToEnd", r2 )

また、"StartToStart"、"EndToStart"、"EndToEnd"を使用しても終点が設定できる。

compareEndPointsメソッドを使うと、2つのテキストレンジの終点（あるいは始点）を比較できる。このメソッドの戻り値は、最初のレンジの終点が2番目のレンジの終点よりも小さい場合は-1、等しい場合は0、大きい場合は1をそれぞれ返す。

ブックマークはテキストレンジの始点と終点を保存する簡単な方法であり、必要なときに素早くこれらの位置をリストアできる。指定されたレンジにブックマークを作成するには、getBookmarkメソッドを使用する。 このメソッドでは、（ブックマークを識別する）エンコードされた文字列を返す。moveToBookmarkメソッドでこの文字列を使用すると、ブックマークを作成したときと同じ始点と終点にテキストレンジを移動できる。

コマンド

テキストレンジのテキストにフォーマットを指定したり、特別なアクションを実行するには、コマンドを使う。execCommandメソッドを使うと、コマンドを実行できる。コマンド識別子や、あらゆる追加コマンド パラメータを指定できる。例えば、Boldコマンドを使うとテキストをボールドに変更できる。次に、JScript例を示す。 

var rng = document.body.createTextRange();
rng.collapse();
rng.expand("sentence");
rng.execCommand("Bold");

上記の例では、ドキュメントを読み込むときにすべてのテキストをボールドにしている。

すべてのコマンドがいつでも使えるわけではない。指定されたテキストレンジでコマンドが使用できるかどうかは、queryCommandEnabledメソッドやqueryCommandSupportedメソッドで調べられる。コマンドについては、DHTMLリファレンスのコマンド識別子を参照すること。

queryCommandStateメソッドは、コマンドの状態を読み出す。このメソッドを使うと、テキストレンジにコマンドが適用されたかどうかを調べられる。コマンドが適用された場合には、trueを返す。

Up トップに戻る
© 1997 Microsoft Corporation. All rights reserved. Terms of Use.