更新日: 2014年12月5日
開発記録

JavaScriptでcollapsed rangeオブジェクトを可視化するツールを作った

JavaScript で、クリックやマウスオーバーのイベントで、カーソル直下の文字列を取得するコードを書いていました。DOM における collapsed range のオブジェクトを操作するのですけど、概念を掴むのがなかなか難しかった。collapsed range オブジェクトとは、range オブジェクトのうち range の始点と終点が同じ位置であり、range.collapsed プロパティが true を返す range オブジェクトのことです。

【お知らせ】英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください！

画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

八章第一回　Rangeとは – JavaScript初級者から中級者になろう – uhyohyo.net
range – Web API インターフェイス | MDN
クリック直下の単語を取得 – JavaScriptで遊ぶよ – g:javascript

WebKit なブラウザでは document.caretRangeFromPoint で collapsed range オブジェクトを取得できる。Mozilla（Firefox）では、同様な collapsed range オブジェクトを、イベントのプロパティ（e.rangeParent, e.rangeOffset）から取得できます。

当初どうにもこの range オブジェクト（今回扱うのは collapsed range オブジェクト）のイメージが掴みにくかったので、以下に range オブジェクトのプロパティを視覚化するツールを作成しました。適当な箇所をクリックすると、range オブジェクトのプロパティ名（関数オブジェクト以外）とその値を表示します。クリックイベントで collapsed range オブジェクトを取得しているので、startOffset と endOffset の値は常に同一で、collapsed プロパティの値は常に true となります。

— 動作確認 —
Firefox 34.0
Google Chrome 39.0

Firefox と Google Chrome でしか動作確認をしていません。他のブラウザでは動かないかもしれないので、ご了承ください。

collapsed range オブジェクトの可視化ツール

以下適当にクリック！range オブジェクトを dump します。

header – ‘here is a header area.’

main – ‘here is a main area.’

sub – ‘here is a sub area.’

footer – ‘here is a footer area.’

cell 1	cell 2	cell 3
cell 4	cell 5	cell 6
cell 7	cell 8	cell 9

HTML コード

以降は、上記ツールのソースコードです。HTML部分。

<div id="range_header">header - <b>'here is a header area.'</b></div>
<div id="range_main">main - <b>'here is a main area.'</b></div>
<div id="range_sub">sub - <b>'here is a sub area.'</b></div>
<div id="range_footer">footer - <b>'here is a footer area.'</b></div>
<br />
<table border="1">
  <tr>
    <td>cell 1</td>
    <td>cell 2</td>
    <td>cell 3</td>
  </tr>
  <tr>
    <td>cell 4</td>
    <td>cell 5</td>
    <td>cell 6</td>
  </tr>
  <tr>
    <td>cell 7</td>
    <td>cell 8</td>
    <td>cell 9</td>
  </tr>
</table>
<br />
<div id="range_dump"></div>

<div id="range_header">header - <b>'here is a header area.'</b></div>

<div id="range_footer">footer - <b>'here is a footer area.'</b></div>

<br />

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

<br />

JavaScript コード

window.onclick = dump_range;
function dump_range(e) {
  var range;
  // WebKit
  if (document.caretRangeFromPoint) {
    range = document.caretRangeFromPoint(e.clientX, e.clientY);
  // Mozilla
  } else if (e.rangeParent) {
    range = document.createRange();
    range.setStart(e.rangeParent, e.rangeOffset);
  }
  var html = "--- click event dump ---<br />";
  html += "X座標: " + e.clientX + "<br />";
  html += "Y座標: " + e.clientY + "<br />";
  html += "--- range object dump ---<br />";
  for(var key in range) {
    if (typeof range[key] === "function") {
      continue;
    }
    html += key + ": " + range[key] + "<br />";
    if (key === "startContainer" || key === "endContainer" || key === "commonAncestorContainer") {
      html += "　data: " + range[key].data + "<br />";
    }
  }
  var dump = document.getElementById("range_dump");
  dump.innerHTML = html;
}