選択範囲のリンク URL の抽出

解決済

質問者：t-okura
質問日時：2009/10/12 14:15
回答数：3件

多数のリンクを持つウェブページから、マウスで選択した
部分に含まれるリンク先 URL をブックマークレットで
取り出したいと思っています。

document.getElementsByTagName( "a" )
でリンクの一覧が取り出せますが、選択範囲外のものも
含まれます。

また、
document.getSelection()
で選択範囲が取り出せるのですが、そこにはリンク先の
URL が含まれていません。

選択範囲に含まれるリンク先 URL を取り出すには
どうすればよいでしょうか。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： Chaire
回答日時：2009/10/14 05:52

getSelection ということで IE は考慮外とします。

まず、Firefox のメッセージに「Deprecated method document.getSelection() called. Please use window.getSelection() instead.」と出るように、document.getSelection() は歴史的理由でのみ残されています（HTML5 にも明記）。window.getSelection() を使うべきです。

単に URI を集めたいだけなら

var df = getSelection().getRangeAt(0).cloneContents();

で選択範囲の複製木を DocumentFragment として取得できますので、後は文書順に辿って a 要素を探して行くだけです。Firefox 3.5+ なら Selectors API が最も手っ取り早いでしょう。

var result = Array.map(df.querySelectorAll('a'), function (a) { return a.href; });

もちろん firstChild/nextSibling/parentNode を駆使して地道に辿っても構いませんし、TreeWalker/NodeIterator を使うのも良いでしょう。残念ながら DOM3-XPath は DocumentFragment に適用できません。

※この方法は部分選択された a 要素を含むことになります。完全選択されたもののみ拾いたければ、Selection#containsNode などを用いて選択範囲の両端を調査して下さい。

※また、この方法は文書木の複製を利用しますので、文書木そのものに変更を加えるような作業はできません。例えば、選択範囲内の a 要素を拾ってスタイルを変更するような場合には、(Selection.anchorNode, Selection.anchorOffset) が示す境界点から、(Selection.focusNode, Selection.focusOffset) が示す境界点までを文書順に辿って a 要素を探すことになります。場合分けが多くなりますが、効率の良い探し方を研究して下さい。

参考URL：http://nanto.asablo.jp/blog/2008/10/18/3829312

- 0
- 件

通報する

この回答へのお礼

参考 URL ありがとうございます。

質問する前にかなりググったのですが見つけることが
できませんでした。まさに質問の回答そのものでした。

コードは今の知識では理解できないので、ゆっくりと
調べてみます。きっと簡単な方法が用意されているに
違いないと思っていたのですが、予想外でした。

通報する

お礼日時：2009/10/14 19:58

No.2

回答者： babu_baboo
回答日時：2009/10/13 23:59

＞選択した部分を取り出す方法は、やはりないのでしょうか

そんなのない！といいたいところだけど、いまのじぶんには
そういいきれるだけのじしんがない！;_;

getSelection()でとれるのは、もじれつ。
ふくまれるもじれつを、のーどのあたいから、ぜんぶけんさくして
はんいをそうさくするか？！（なんと、ひこうりつてきな・・・）

<p>のとちゅうから、したの<p>まで、はんいしていすると
ひっかっかったんだけど・・・。ざんねん！

しばらくまつと、かいとうがもらえるかもしれない。
もしくは、しめきって、さいどたずねるとか・・・
まぁ～おれのはするーして！

（はじめて”ちゃん”づけでよばれたぜぇ!^^;）

- 0
- 件

通報する

この回答へのお礼

ありがとうございました。
おかげさまで、ぴったりの回答がもらえました。

通報する

お礼日時：2009/10/14 20:00

No.1

回答者： babu_baboo
回答日時：2009/10/13 15:33

かんぺきにゴミだとおもう。

ひろうすべをしらないので
まうすのぼたんをおしたところから、はなしたところまで
Aたぐをひろってhrefをあつめてみた。^^;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>TEST</title>
<body>
<p>abc</p>
<ul>
<li><a href="a">abc</a></li>
<li><a href="b">def</a></li>
<li><a href="c">ghi</a></li>
</ul>
<p>abc</p>

<script type="text/javascript">
</script>

この回答への補足

babu_baboo ちゃん(^^; 回答ありがとうございます。
全角空白を半角にして試してみたのですが、うまく
選択できていないようでした。

abc の部分を選択すると空のパネルが表示されました。
abc ～ def までを選択すると abc のリンク先の a だけ
が拾えました。

実際にやりたいのはひと様のページを表示し、
URL 欄に
javascript:var links=document.getElementsByTagName("a");var str="";for (var i=0;i<links.length;i++) {var link=links[i];str=str+link.href+"\n";} alert(str);
と入力するようなことなのです。この例では、表示している
ページのすべてのリンク先が表示されてしまうのですが、
選択したところだけにしたいのです。

選択した部分を取り出す方法は、やはりないのでしょうか。