Document Object Model
Written 10/29/00
4. TextRange
以下は IE4 以上について述べています。 その他ではたぶん動きません。
TextRangeオブジェクトを得る
TextRange オブジェクトは 実際に表示されるテキストの範囲を表します。
TextRange オブジェクトは次のように得ます。
  rng = obj.createTextRange()
  rng = document.selection.createRange()
 
上は、bodybuttontexttextarea に適用されます。 下はマウスで選択された範囲から TextRange オブジェクトを得ます。
textプロパティ
その TextRange オブジェクトのテキストを表します。 変更もできます。
  rng.text
 
例えば、下のテキストボックスに文字を入力してボタンを押すと、 その文字が表示されます。
  var rng = form.text1.createTextRange();
  alert(rng.text);
 
selectメソッド
その TextRange オブジェクトのテキストを選択します。
  rng.select()
 
例えば、下のテキストボックスに文字を入力してボタンを押すと、 その文字が選択されます。
  var rng = form.text1.createTextRange();
  rng.select();
 
位置と大きさを得る
TextRangeオブジェクトの位置と大きさを得られます。
  rng.boundingLeft
  rng.boundingTop
  rng.boundingWidth
  rng.boundingHeight
 
例えば下のようなボタンの文字の、ドキュメントの上からの座標を得ます。
  var rng = obj.createTextRange();  //objはボタン
  alert(rng.boundingTop);
 
コマンドを実行する
TextRange オブジェクトに対しコマンドを実行することができます。
  rng.execCommand(sCommand
            [, bUserInterface [, vValue]])
 
コマンドの実行が成功すれば true、 失敗すれば false が帰ります。
sCommand がコマンドを表す文字列です。 下に例がありますが、非常に多くのコマンドがあります。詳しくは、 Command Identifiers をご覧ください。
bUserInterface はよく分かりませんが、 デフォルトで false です。
vValue はコマンドの引数です。

最初は delete コマンドの例です。

  var rng = form.text1.createTextRange();
  rng.execCommand("delete");
 
テキストボックスに何か入力してボタンを押してください。 delete コマンドが実行されて、テキストが消去されます。
Bold
ForeColor red
Paste
  var rng = document.selection.createRange();
  if(form.radio1[0].checked)
    rng.execCommand("Bold");
  else if(form.radio1[1].checked)
    rng.execCommand("ForeColor", false, "red");
  else
    rng.execCommand("Paste");
 
マウスで適当に文字を選択して、項目を選択して、ボタンを押してください。 1番目を選択していれば選択部分が太字に、2番目なら文字が赤くなります。 3番目は何かコピーされていれば、選択部分がそれに置き換えられます。

コマンドはその TextRange オブジェクトによって 実行できるかどうか変わります。 実行できるかどうかは queryCommandEnabled で確かめられます。

  rng.queryCommandEnabled(sCommand)
 
実行できるなら true が、 できないなら false が返ります。
  var rng = form.text1.createTextRange();
  alert(rng.queryCommandEnabled("Bold"));
 
テキストボックスに何か入力して、 それに対して Bold コマンドが実行できるかどうか調べると、 false が返ってきて実行できないことが分かります。
TextRangeを変える
moveStartmoveEnd を用いて TextRange の範囲を変えることができます。
  rng.moveStart(unit [, count])
  rng.moveEnd(unit [, count])
 
moveStart は範囲の先頭を moveEnd は範囲の最後を動かします。
unit は動かす単位で、 character word sentence textedit が指定できます。
count はいくつ動かすかで、 正なら文書の流れる方向に進み、負なら逆に後退します。 デフォルトは1です。
返り値は指定した単位で実際にいくつ動いたかを返します。
  var rng = document.selection.createRange();
  rng.moveStart("character", -1);
  rng.moveEnd("character", 1);
  rng.select();
 
文字をマウスで選択しボタンを押すと、選択範囲が前後1文字ずつ広がります。

unittextedit を使うと、 範囲が最後まで広がるので、現在の選択位置を知ることができます。

  var rng = document.selection.createRange();
  rng.moveEnd("textedit");
  alert(form.text1.value.length - rng.text.length);
 
テキストボックスに何か入力して、適当に文字を選択してください。 何文字目から選択されているかを表示します。 先頭から選択されていれば0です。

もう1つ例を挙げます。

  var findstr = form.elements[0].value;
  var len = findstr.length;
  var oRange = document.body.createTextRange();
  if(oRange.text.indexOf(findstr) == -1) {
    alert("検索終了");
    return;
  }
  //検索文字列が先頭になるまでtextRangeオブジェクトの先頭を進める
  while(oRange.text.indexOf(findstr) > 0)
    oRange.moveStart("character", 1);
  //textRangeオブジェクトが検索文字列と同じ長さになるまで末尾を後退する
  while(oRange.text.length > len)
    oRange.moveEnd("character", -1);
  oRange.select();
 
検索文字列をテキストボックスに入力ボタンを押すと、 このページ内を検索します。検索されたらそのテキストが選択されます。
このスクリプトは遅くて仕様がしょぼいです。 ましなものがここにあります。
Back