2011年4月27日水曜日

RangeオブジェクトとSelectionオブジェクト

JavaScriptにおけるRangeオブジェクトとSelectionオブジェクトの使いかたとして、次の2つのケースを書いておく。

  1. 選択範囲のテキストを取得する
  2. 指定したノードを選択状態にする

1. 選択範囲のテキストを取得する

マウスで選択したテキストがアラートで表示される、という簡単な例題。

IE以外の場合

まずSelectionオブジェクトを取得して、そこからさらにRangeオブジェクトを取得する（それぞれ、getSelectionメソッドとgetRangeAtメソッドを使う）。RangeオブジェクトのtoStringメソッドで求めるテキストが得られる。

    <p id="p">foo bar baz</p>

    <script type="text/javascript">
      document.getElementById('p').onmouseup = function(){
        var range = window.getSelection().getRangeAt(0);
        alert(range.toString());
      }
    </script>

Windows7のFirefox, Chrome, Safariで期待通りに動作した。

IEの場合

考え方は同じだが、使用するメソッドが異なる。

  • Selectionオブジェクト … documentオブジェクトのselectionプロパティ
  • Rangeオブジェクト（IEの場合はTextRangeオブジェクトと言う） … SelectionオブジェクトのcreateRangeメソッド
  • テキスト … TextRangeオブジェクトのtextプロパティ
    <p id="p">foo bar baz</p>

    <script type="text/javascript">
      document.getElementById('p').onmouseup = function(){
        var range = document.selection.createRange();
        alert(range.text);
      };
    </script>

2. 指定したノードを選択状態にする

HTMLの中の任意の要素を選択状態（明暗が反転した状態）にする、という簡単な例題。

IE以外の場合

SelectionオブジェクトのselectAllChildrenメソッドを使う。引数として渡した要素が、子要素を含めて選択状態になる。

    <p id="p">foo bar baz</p>

    <script type="text/javascript">
      window.getSelection().selectAllChildren(document.getElementById('p'));
    </script>

これもWindows7のFirefox, Chrome, Safariで期待通りに動作した。

IEの場合

IEの場合は、Selectionを使わない。

まずはTextRangeオブジェクトを生成し、それが指定の要素を含むようにmoveToElementTextメソッドを実行する。さらにselectメソッドを実行して、要素を選択状態にする。

    <p id="p">foo bar baz</p>

    <script type="text/javascript">
      var range = document.body.createTextRange();
      range.moveToElementText(document.getElementById('p'));
      range.select();
    </script>

とりあえず以上。テキストの追加、削除、比較などについてはリファレンスを参考に。

0 件のコメント:

コメントを投稿