• ベストアンサー
  • 困ってます

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

多数のリンクを持つウェブページから、マウスで選択した 部分に含まれるリンク先 URL をブックマークレットで 取り出したいと思っています。 document.getElementsByTagName( "a" ) でリンクの一覧が取り出せますが、選択範囲外のものも 含まれます。 また、 document.getSelection() で選択範囲が取り出せるのですが、そこにはリンク先の URL が含まれていません。 選択範囲に含まれるリンク先 URL を取り出すには どうすればよいでしょうか。

共感・応援の気持ちを伝えよう!

  • 回答数3
  • 閲覧数790
  • ありがとう数3

質問者が選んだベストアンサー

  • ベストアンサー
  • 回答No.3
  • Chaire
  • ベストアンサー率60% (79/130)

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

共感・感謝の気持ちを伝えよう!

質問者からのお礼

参考 URL ありがとうございます。 質問する前にかなりググったのですが見つけることが できませんでした。まさに質問の回答そのものでした。 コードは今の知識では理解できないので、ゆっくりと 調べてみます。きっと簡単な方法が用意されているに 違いないと思っていたのですが、予想外でした。

関連するQ&A

  • iframeのソースを取得したい

    いつもお世話になります。 物凄くまとめてしまってすみません。 window.onload = alert(document.getElementsByTagName("body")[0].getElementsByTagName("iframe")[0].contentWindow.document.innerHTML); というようなスクリプトを実行しているのですが、未定義(undifined)が表示されてしまいます。 もちろんbodyないにちゃんとしたsrcを指定したiframeはあります。 どのようにすればいいでしょうか。 よろしくお願いします。

  • VBAオブジェクト変数またはWithブロック変数

    Access VBAについてお教えください。 VBAを使用しています。下記のようなコードでDOMの値を取得しようと思っています。 If IsNull(IE.Document.getElementsByTagName("table").Item(1).rows(1).cells(0).innerText) Or _ IE.Document.getElementsByTagName("table").Item(1).rows(1).cells(0).innerText = "" Then stocker = "" Else stocker = IE.Document.getElementsByTagName("table").Item(1).rows(1).cells(0).innerText End If IE.Document.getElementsByTagName("table").Item(1).rows(1).cells(0).innerText)にデータがある場合は、 問題なくstockerに値をセットすることができます。 ただし、IE.Document.getElementsByTagName("table").Item(1).rows(1).cells(0).innerText)にデータ(要素)が なにも無い場合は、エラーが発生します。 「実行時エラー91;オブジェクト変数またはWithブロック変数が設定されていません」 IE.Document.getElementsByTagName("table").Item(1).rows(1).cells(0).innerText)にデータが無い場合は、NULLが 帰ってくるとサイトで見かけたので、IF文を使って回避しようと思いましたが、成功しませんでした。 何が悪いと考えられるでしょうか?

  • フレームで開いたページのリンク抽出

    インラインフレーム、フレーム、新規ウィンドウなどでウェブページを開いてリンクを抽出するにはどうしたらよいのでしょうか? 試した方法は、親ファイルでiframe名.location.href="目的のURL"としインラインフレームでウェブページを開いた後、 http://blog.bulknews.net/mt/archives/001099.htmlのブックマークレットをiframe名.location.href="ブックマークレット"でリンク抽出しようとしたのですが、ブラウザはブックマークレットとして認識してくれず、「ページが表示できません」となってしまいます。 ただ、ウェブページではなくローカルに置いたファイルを開いたのち、同じくiframe名.location.href="ブックマークレット"すると上手く動作してくれるのですが…… ウェブページでもブックマークレットを動作させる方法、あるいは親ファイル内のjavascriptでブックマークレットに相当する動作をするjavascriptの書くなどがあればぜひ教えてください。

その他の回答 (2)

  • 回答No.2

>選択した部分を取り出す方法は、やはりないのでしょうか そんなのない!といいたいところだけど、いまのじぶんには そういいきれるだけのじしんがない!;_; getSelection()でとれるのは、もじれつ。 ふくまれるもじれつを、のーどのあたいから、ぜんぶけんさくして はんいをそうさくするか?!(なんと、ひこうりつてきな・・・) <p>のとちゅうから、したの<p>まで、はんいしていすると ひっかっかったんだけど・・・。ざんねん! しばらくまつと、かいとうがもらえるかもしれない。 もしくは、しめきって、さいどたずねるとか・・・ まぁ~おれのはするーして! (はじめて”ちゃん”づけでよばれたぜぇ!^^;)

共感・感謝の気持ちを伝えよう!

質問者からのお礼

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

  • 回答No.1

かんぺきにゴミだとおもう。ひろうすべをしらないので まうすのぼたんをおしたところから、はなしたところまで 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"><!-- //@cc_on @set @V = ( @_jscript_version >= 5.5 ) /*@if( @V ) attachEvent( 'on' + @else@*/ addEventListener (/*@end@*/  'load', (function ( ) { return function ( evt ) {   var se, ee;      document./*@if(@V) attachEvent( 'on'+ @else@*/ addEventListener(/*@end@*/    'mousedown', function ( evt ) {     se = evt./*@if( @V ) srcElement @else@*/ target /*@end@*/;    }, false);   document./*@if(@V) attachEvent( 'on'+ @else@*/ addEventListener(/*@end@*/    'mouseup', (function ( next ) { return function ( evt ) {     var a = [];     ee = evt./*@if(@V) srcElement @else@*/ target /*@end@*/;     while( (ee != (se = next( se ))) && se )     'A' == se.nodeName && a.push( se.getAttribute( 'href' /*@, 2@*/ ) );     alert(a);    };})(     function ( e ) {      var n;      if( n = e.firstChild ) return n;      do if( n = e.nextSibling ) return n; while ( e = e.parentNode );      return null;     }    ), false);  };})(), false); //ぜんかくくうはくは、はんかくにでもなおしてね。 //--> </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); と入力するようなことなのです。この例では、表示している ページのすべてのリンク先が表示されてしまうのですが、 選択したところだけにしたいのです。 選択した部分を取り出す方法は、やはりないのでしょうか。

関連するQ&A

  • フレーム内の値が取得できません。どうか助けて下さい↓

    javaScript初心者です。どうか教えて下さい。 ブラウザ:FireFox で画面を開き、DOMの構造を確認すると、以下の用になっています。(適所省略) 内容:フレームが3つ存在し、BodyFrameの中の値1を取得する為にはどのようにすればよろしいのでしょうか? いろいろ試行錯誤したのですが、フレームが見つからない旨のエラーが表示されてしまいます。 ※試したパターン var b = parent.BodyFrame.document.getElementsByTagName("TD").item(0); var b = BodyFrame.document.getElementsByTagName("TD").item(0); var b = BeginFrame.MainFrame.BodyFrame.document.getElementsByTagName("TD").item(0); var b = top.BodyFrame.document.getElementsByTagName("TD").item(0); var b = window.BodyFrame.document.getElementsByTagName("TD").item(0); Frame(BeginFrame) -Frame(MainFrame) -Frame(BodyFrame) <HTML> <head></head> <BODY> <table> <tr> <td>値1</td><td>値2</td><td>値3</td> </tr> <tr> <td>あああ</td><td>いいい</td><td>ううう</td> </tr> </table> </BODY> </HTML> いろいろ調べたのですが、お手上げです。どうかご教授下さい。

  • WEBページの表のデータを取得

    外部にあるWEBページにある表のデータを取得したいのですが、色々調べてみましたが見つからなくて、ご存じの方教えてください! あるWEBページに表がいくつかあります。 その中の一つの表のデータが全部欲しいです。 その表のTableタグにはIDがふってあります。 その表を囲んだDIVタグにもIDがふってあります。 URLは固定です。 TDタグの全てにはClassタグが入っています。 VB2005を使っています。 どのようにすればいいか見当がつかなくて、これ↓を使えばいいのかなあというくらいしかわかりませんでした。。(泣) Document.Body.GetElementsByTagName() どうぞよろしくお願いいたします。

  • 選択範囲のリンクをすべてタブで開くタブブラウザ

    選択範囲のリンクをすべてタブで開く、ブラウザーとしてSleipnirを使っています。 しかし、選択するさいに画像と文字の両方を選択してしまって、同じURLが2重に開いてしまいます。そういうサイトが多いです。 これを回避するために、同リンクは開かないように設定変更できませんでしょうか? もしくは、そのようなことができるブラウザを教えてもらえるとありがたいです。 あと、googleの検索結果に対してリンク先をすべて開くと、 キャッシュまで開いてしまって使えませんが、、 これはたぶん、どうしようもないですよね?? 何でも結構なのでよろしくお願いします。

  • ?__mode=rssのRSSデータからトラックバックをしたトラックバック先のURLを取得するプログラムの改正

    import javax.xml.parsers.*; import org.w3c.dom.*; import java.io.*; public class GetTBlink { public static void main(String[] args) { try { String url = "http://app.blog.livedoor.jp/takapon_ceo/tb.cgi/50030092?__mode=rss"; DocumentBuilderFactory dbfactory = DocumentBuilderFactory.newInstance(); DocumentBuilder builder = dbfactory.newDocumentBuilder(); Document doc = builder.parse(url); Element root = doc.getDocumentElement(); NodeList list0 = root.getElementsByTagName("error"); Element element0 = (Element)list0.item(0); NodeList list1 = root.getElementsByTagName("rss"); Element element = (Element)list1.item(0); NodeList list2 = root.getElementsByTagName("channel"); Element element1 = (Element)list2.item(0); NodeList list3 = element1.getElementsByTagName("item"); for (int i=0; i < list3.getLength() ; i++) { Element element2 = (Element)list3.item(i); NodeList linkList = element2.getElementsByTagName("link"); Element linkElement = (Element)linkList.item(0); String link = linkElement.getFirstChild().getNodeValue(); System.out.println("リンク:" + link ); } } catch (Exception e) { e.printStackTrace(); } } } 以上のプログラムを次のように改正したいです。 pingurl = http://app.blog.livedoor.jp/takapon_ceo/tb.cgi/50030092として、 pingurlの後ろに ?__mode=rssを付加させるようにして String url を指定したい (String url = (pingurl)?__mode=rss のようなイメージ)  よろしくお願いします。

    • ベストアンサー
    • Java
  • getElementsByTagNameが使えない

    javascriptで下記コードを書いて動的にmetaタグを作成しようとしたところ うまくいきませんでした。調べていたところgetElementsByTagNameは safariではうまく動かないという記述があったのですが この関数に替わるものもしくはその他の方法はありますでしょうか。 var meta = document.createElement("meta"); meta.setAttribute("name", "ad-banner"); meta.setAttribute("content","test-id=xxxxx"); document.getElementsByTagName("head")[0].appendChild(meta);

  • 【JavaScript】iFrame内submit

    JavaScriptで、iFrame内のFormをsubmitする方法を教えてください。 条件: iFrameに読み込むページは千差万別で、FormにIDもNameも設定されていない状況(ただし、必ずFromは1つ)で、そのiFrame内のフォームをsubmitする方法。 Form名がわからないですから、getElementsByTagName("form")[0]で呼び出すしかなさそうなんですが、 (iFrameの名前を"ifl"とします)iFrameの外に置いた空アンカーで <a href="#" onclick="parent.ifl.getElementsByTagName(\"form\")[0].submit()">iFrame内をsubmit</a> としても <a href="#" onclick="document.ifl.getElementsByTagName(\"form\")[0].submit()">iFrame内をsubmit</a> としてもうまく動きません(;´Д`) どういうエラーが出てるのか知りたかったので、onclick内部を外出しして、try-catchでくくり function pushSubmit() { try { eval("parent.ifl.getElementsByTagName(\"form\")[0].submit()"); } catch(e) { alert(e); } } としてから、pushSubmit()を空アンカーで実行すると、エラーは「Error: Permission denied for <file://> to get property Window.getElementsByTagName」と返ってきます。 もう、どうにも突き当たってしまいました・・・ どなたか光明を差して下さい・・・orz

  • ブラウザ上で選択範囲のリンク先画像を一括保存したい

    とあるWEBページで、以下のようにリンク先に画像が設定されて(gifとjpeg)います。 ------------------------------- 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ※この1~20までの数字が全てリンクで、リンク先が画像 ------------------------------- で、その数が100個近くあるんですが、 これを、マウスでドラッグし、範囲選択後、まとめて画像保存したいのです。 プラグイン、ソフト等、なんでも良いのですが、まとめて保存できる方法はないでしょうか? ご教授よろしくお願いいたします。

  • PHPのDOMでXML読み込もうとしているのですが...

    PHPのDOMでXML読み込もうとしているのですが、getElementsByTagNameがうまくいきません。 PHPのバージョンは5です。 コードは以下のとうりです。 $document = new DomDocument('1.0'); $document -> Load('test.xml'); $items = $document -> getElementsByTagName('item'); if(!is_null( $items)){ echo count($items); echo "ok"; } XMLにitemノードは3つあるので、 echo count($items); で 3が返ってくると思うのですが、1しか返ってきません。 $items -> value でも何も表示されません。 でも cho "ok"; の ok は表示されます。 すみません。どなたかどこが間違っているのか教えていただけると助かります。

    • ベストアンサー
    • PHP
  • 選択範囲のリンクのコピーをコピーするには

    選択範囲のリンクのURLを抽出して、コピーするにはどうしたらよいでしょうか? 一応調べて見たのですが、選択範囲のURLを開く方法しか見つかりません。 何か解決方法があれば教えてください。どうかよろしくお願いします。

  • rel属性を複数使用したい

    XHTML 1.0 Strictなのでtarget="_blank"の代用で外部jsに function externalLinks() { if (!document.getElementsByTagName) return; var anchors = document.getElementsByTagName("a"); for (var i=0; i<anchors.length; i++) { var anchor = anchors[i]; if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "external") anchor.target = "_blank"; } } window.onload=externalLinks; として読み込みリンクに<a rel="external" ..........>としています。 その他にhighslide.jsを使用しているのですがrel属性が重複しているためか highslide.jsの動作は正常なのですがtarget="_blank"の代用の効果がありません。 rel属性が重ならないようにしたいのですが解決策はありますでしょうか? highslide.jsのURLです↓ http://vikjavev.no/highslide/