X-0031 選択範囲のリンクを収集する ～ DOM2 RangeのcompareBoundaryPointsの使い方

処理の流れ

1. ページ中の選択範囲を取得
2. 選択範囲からRangeオブジェクトを取得
3. それぞれのRangeについてリンクを収集

Mozillaでは、Ctrlキーを押しながらtableのセルをクリックすることで、連続していないセルを複数選択することができます。このような場合、一つの「選択範囲オブジェクト」から複数のRangeを取り出して処理しなくてはなりません。

Rangeの中に含まれるリンクを収集するにあたっては、どうやってRangeの中にあるリンクだけを収集するかが問題になります。また、部分選択されたリンクの扱いにも工夫が必要です。

これらの点についてそれぞれ解説します。

選択範囲の取得と、対応するRangeオブジェクトの取得

Mozillaでは、WindowオブジェクトのgetSelection()メソッドによって選択範囲オブジェクト（nsISelection）を取得することができます。

このオブジェクトにはrangeCountというプロパティとgetRangeAt()というメソッドがあり、これらを使ってDOM2 RangeのRangeオブジェクトを取得できます。以下に例を示します。

function getSelectionLinksInFrame(aWindow)
{
  var links = [];
  var selection = aWindow.getSelection();

  // 何も選択されていない場合は、何もしない。
  if (!selection || !selection.rangeCount) return links;

  const count = selection.rangeCount;
  var selectionRange;
  for (var i = 0; i < count; i++)
  {
    selectionRange = selection.getRangeAt(i);
    ...
  }

  return link;
}

ここから先の処理は、こうして取得した「それぞれのRange」について行うことになります。

なお、選択範囲オブジェクトは「始点が終点よりも後にある（＝下から上へ向けて選択された）」という場合があり得ますが、DOM2 Rangeのオブジェクトについては常に「始点は終点よりも前」となります（仕様上、始点が終点より後になることはあり得ない）。よって、選択範囲オブジェクトとRangeオブジェクトとで始点と終点が入れ替わることもあります。

Rangeの中に含まれるリンクを収集する

部分選択されたリンクに対する特別な処理

さて。以下のような場合、最初と最後のリンクはどのように扱うべきでしょうか？

<ul>
  <li><a href="01.html">最初の【ここから選択→】リンク</a></li>
  <li><a href="02.html">真ん中のリンク</a></li>
  <li><a href="03.html">【←ここまで選択】最後のリンク</a></li>
</ul>

最初のリンクは、途中からとはいえ選択されていますから、「選択されている」と見なしてよいでしょう。しかし前述までの処理では、これは「選択範囲外のリンク」として扱われてしまいます。

最後のリンクは、一応選択範囲に含まれてはいますが、内容のテキストは一文字も選択されていません。これは行選択をした時などによく起こる現象です（同様の現象が、選択範囲の先頭でも起こり得ます）。前述までの処理では、この「選択されているようには見えない」リンクまでもが「選択範囲内のリンク」として扱われてしまいます。

ということで、これらに対する例外処理を行わなくてはなりません。

まとめ

以上で、「選択範囲のリンクを収集する」処理はできあがりです。ここまでのまとめを以下に示しました。改変も二次利用も一切制限しませんので、好きに使ってください。

function getSelectionLinksInFrame(aWindow)
{
  var links = [];
  var selection = aWindow.getSelection();

  if (!selection || !selection.rangeCount) return links;

  const count = selection.rangeCount;
  var range,
      node,
      link,
      nodeRange = aWindow.document.createRange();
  for (var i = 0; i < count; i++)
  {
    selectionRange = selection.getRangeAt(i);
    node           = selectionRange.startContainer;

    traceTree:
    while (true)
    {
      nodeRange.selectNode(node);

      if (nodeRange.compareBoundaryPoints(Range.START_TO_END, selectionRange) > -1) {
        if (nodeRange.compareBoundaryPoints(Range.END_TO_START, selectionRange) > 0) {

          if (
            links.length &&
            selectionRange.startContent.nodeType != Node.ELEMENT_NODE &&
            selectionRange.startOffset == selectionRange.startContainer.nodeValue.length &&
            links[0] == getParentLink(selectionRange.startContainer)
            )
            links.splice(0, 1);

          if (
            links.length &&
            selectionRange.endContainer.nodeType != Node.ELEMENT_NODE &&
            selectionRange.endOffset == 0 &&
            links[links.length-1] == getParentLink(selectionRange.endContainer)
            )
            links.splice(links.length-1, 1);

          break;
        }
        else if (link = getParentLink(node))
          links.push(link);
      }

      if (node.hasChildNodes() && !link) {
        node = node.firstChild;
      }
      else {
        while (!node.nextSibling)
        {
          node = node.parentNode;
          if (!node) break traceTree;
        }
        node = node.nextSibling;
      }
    }
  }

  nodeRange.detach();

  return links;
}

function getParentLink(aNode)
{
  var node = aNode;
  while (!node.href && node.parentNode)
    node = node.parentNode;

  return node.href ? node : null ;
}