- ベストアンサー
選択範囲のリンク URL の抽出
多数のリンクを持つウェブページから、マウスで選択した 部分に含まれるリンク先 URL をブックマークレットで 取り出したいと思っています。 document.getElementsByTagName( "a" ) でリンクの一覧が取り出せますが、選択範囲外のものも 含まれます。 また、 document.getSelection() で選択範囲が取り出せるのですが、そこにはリンク先の URL が含まれていません。 選択範囲に含まれるリンク先 URL を取り出すには どうすればよいでしょうか。
- t-okura
- お礼率69% (32/46)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
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 要素を探すことになります。場合分けが多くなりますが、効率の良い探し方を研究して下さい。
その他の回答 (2)
- babu_baboo
- ベストアンサー率51% (268/525)
＞選択した部分を取り出す方法は、やはりないのでしょうか そんなのない！といいたいところだけど、いまのじぶんには そういいきれるだけのじしんがない！;_; getSelection()でとれるのは、もじれつ。 ふくまれるもじれつを、のーどのあたいから、ぜんぶけんさくして はんいをそうさくするか？！（なんと、ひこうりつてきな・・・） <p>のとちゅうから、したの<p>まで、はんいしていすると ひっかっかったんだけど・・・。ざんねん！ しばらくまつと、かいとうがもらえるかもしれない。 もしくは、しめきって、さいどたずねるとか・・・ まぁ～おれのはするーして！ （はじめて”ちゃん”づけでよばれたぜぇ!^^;）
お礼
ありがとうございました。 おかげさまで、ぴったりの回答がもらえました。
- babu_baboo
- ベストアンサー率51% (268/525)
かんぺきにゴミだとおもう。ひろうすべをしらないので まうすのぼたんをおしたところから、はなしたところまで 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
- フレームで開いたページのリンク抽出
インラインフレーム、フレーム、新規ウィンドウなどでウェブページを開いてリンクを抽出するにはどうしたらよいのでしょうか？ 試した方法は、親ファイルでiframe名.location.href="目的のURL"としインラインフレームでウェブページを開いた後、 http://blog.bulknews.net/mt/archives/001099.htmlのブックマークレットをiframe名.location.href="ブックマークレット"でリンク抽出しようとしたのですが、ブラウザはブックマークレットとして認識してくれず、「ページが表示できません」となってしまいます。 ただ、ウェブページではなくローカルに置いたファイルを開いたのち、同じくiframe名.location.href="ブックマークレット"すると上手く動作してくれるのですが…… ウェブページでもブックマークレットを動作させる方法、あるいは親ファイル内のjavascriptでブックマークレットに相当する動作をするjavascriptの書くなどがあればぜひ教えてください。
- 締切済み
- JavaScript
- ブラウザ上で選択範囲のリンク先画像を一括保存したい
とあるWEBページで、以下のようにリンク先に画像が設定されて(gifとjpeg)います。 ------------------------------- １ ２ ３ ４ ５ ６ ７ ８ ９ １０ １１ １２ １３ １４ １５ １６ １７ １８ １９ ２０ ※この1～20までの数字が全てリンクで、リンク先が画像 ------------------------------- で、その数が100個近くあるんですが、 これを、マウスでドラッグし、範囲選択後、まとめて画像保存したいのです。 プラグイン、ソフト等、なんでも良いのですが、まとめて保存できる方法はないでしょうか？ ご教授よろしくお願いいたします。
- ベストアンサー
- ブラウザ
- ●excite英日、日英の頁翻訳ではなく、選択テキスト(長文対応)を新しいウィンドウに結果表示させるブックマークレットとは？
●下記頁にexcite英日のブックマークレットがありますが これを新しいウィンドウで開く為には、どのように修正すればよいのでしょうか？ http://www.excite.co.jp/world/bookmarklet/ javascript:(function(){var%20b=((window.getSelection&&window.getSelection())||(document.getSelection&&document.getSelection())||(document.selection&&document.selection.createRange&&document.selection.createRange().text));if(b!=''){location.href='http://www.excite.co.jp/world/english/?before='+encodeURIComponent(b)+'&wb_lp=ENJA&ie=UTF-8';}else{location.href='http://www.excite.co.jp/world/english/web/?wb_url='+encodeURIComponent(location.href)+'&wb_lp=ENJA';}})(); ●私のイメージとしては 下記頁の最下部にある"選択範囲をExciteで邦訳する(IE版)"が近いのですが 惜しい事に、長文選択の場合、上記ブックマークレットのようには翻訳できないようです。 http://confetto.s31.xrea.com/misc/bookmarklets/tool javascript:(function(){var d=document,b=d.body,f=d.createElement('form'),p=f.appendChild(d.createElement('p')),i=p.appendChild(d.createElement('input')),t=p.appendChild(d.createElement('textarea'));f.action='http://www.excite.co.jp/world/english/';f.method='post';f.target='_blank';f.style.display='none';i.name ='wb_lp';i.value='ENJA';t.name ='before';t.appendChild(d.createTextNode(d.selection.createRange().text));b.appendChild(f);f.submit();b.removeChild(f)})() ●excite英日、日英の頁翻訳ではなく 選択テキスト(長文対応可！)を新しいウィンドウに結果表示させるブックマークレットを教えて下さい よろしくお願い致します。m(_ _)m
- 締切済み
- JavaScript
- 選択範囲のリンクのコピーをコピーするには
選択範囲のリンクのＵＲＬを抽出して、コピーするにはどうしたらよいでしょうか？ 一応調べて見たのですが、選択範囲のＵＲＬを開く方法しか見つかりません。 何か解決方法があれば教えてください。どうかよろしくお願いします。
- 締切済み
- ブラウザ
- ブックマークレットで質問があります
リンクをクリックすると リンク先には飛ばずにURLをコピーする ブックマークレットは出来ますか。 さらに出来れば、 そのブックマークレットをもう一度実行すると ブックマークレットを実行しなかった状態に戻すようにしてほしいです。つまり普通にリンク先に飛ぶようになるように。 よろしくお願いいたします。
- 締切済み
- JavaScript
- 選択範囲のリンクをすべてタブで開くタブブラウザ
選択範囲のリンクをすべてタブで開く、ブラウザーとしてSleipnirを使っています。 しかし、選択するさいに画像と文字の両方を選択してしまって、同じURLが２重に開いてしまいます。そういうサイトが多いです。 これを回避するために、同リンクは開かないように設定変更できませんでしょうか？ もしくは、そのようなことができるブラウザを教えてもらえるとありがたいです。 あと、googleの検索結果に対してリンク先をすべて開くと、 キャッシュまで開いてしまって使えませんが、、 これはたぶん、どうしようもないですよね？？ 何でも結構なのでよろしくお願いします。
- ベストアンサー
- ブラウザ
- URLについて
宜しくお願いします。 最近、URLについて分からない事があったので、基本的な事なのかもしれませんが、教えて下さい。 次のURL http://adv.ktplan.jp/macx/ は、「Mac OSＸ ソフトウエアサーチ」というサイトのものですが、 このサイトの下の方の、「カテゴリー 一覧」という所の「メール」 というところからリンクし、リンクして出てきたページの２ページ目に出ている「Mac OSメール環境」をクリックすると、 「Mac OSメール環境」のトップページが出ます。 このページをブックマークに入れましたが、 次にこのブックマークから開こうとすると、 「Mac OSメール環境」のトップページではなく、 「Mac OSＸ ソフトウエアサーチ」が出ます。 見ると、この二つのページのURLは同じです。 上記URLをブックマークに入れていますが、 「Mac OSメール環境」のページに行きたい時に、「Mac OSＸ ソフトウエアサーチ」のサイトからリンクしていかねばならず、少し不便に思います。 このように、あるページと、そこからリンクした別のページのURLが同じであるという事は、よくある、あたりまえの事なのでしょうか？ どうでもいいといえば、いいのですが、お願いいたします。 Mac OSX、ブラウザはMozillaです。
- ベストアンサー
- その他（インターネット・Webサービス）
- URLからYoutubeプレイリストへの追加
Webページ上に掲載されたYoutubeのリンクからYoutubeの「プレイリスト」或いは「後でみる」に追加する方法を教えてください。 現在、ブログやまとめサイト等をiPadのRSSリーダーで閲覧しています。 その際多数のYoutube埋め込み動画やリンクなどが掲載されていることがありますが、その都度リンク先へ飛んで視聴していると非常に手間がかかります。 埋め込み動画にしても、一つ一つ再生していると他の作業を中断することになり非効率に感じています。 又、Youtubeサイト以外のでの閲覧に規制がかかっている動画も多くあります。 よって、それらのリンクを辿ることなくYoutubeのプレイリストに直接追加し、その後プレイリスト上で連続再生できればと考えておりますが、良い方法をご存知の方がおりましたらご教授願います。 以下補足。 iOS上で利用しているRSSリーダーは"Mr.Reader "という物で、アプリ上でブックマークレットやJavascriptが扱えます。 現在は"Mr.Reader"からブックマークレットを用いて"Songdrop"というWebサービスに送信していますがこの方法だと一度リンクを踏まなければなりません。 ブックマークレットではなくJavascriptならば、URLを直接Songdropに送ることができるものと思うのですが、そのようなソースは見つける事ができませんでした。 Web連携サービスのIFTTTやiOSアプリの「Workflow」などを利用するなどの方法でもかまいません。 出来る限りiPad上で作業を完結させたいです。 下準備にかかる手間はいといませんが、実行時の作業は数ステップですませたいです。 又、実行時にアプリを行き来することも避けたいです。 以上、上記条件を満たさずとも便利な方法ございましたらお教え願います。
- リンクのＵＲＬが開けません！
ＩＥのＷＥＢページの中にある、リンクＵＲＬをクリックしても、開けなくなりました。コピーをして、アドレスにペーストすると開けるのですが。いろいろやってみて、メールoutlookの中にある、ＵＲＬは表示できるようになりました。助けてください！
- ベストアンサー
- その他（インターネット接続・通信）
- Word2010で作成したPDFのリンクについて
Word2010で作成した文書中の一つの文言をリンク元とし、Webページをリンク先として ハイパーリンクを設定しました。 そのあとWordの機能でPDFとして保存しました。 PDFを開き上記で設定したリンク元をクリックしても、リンク先のWebページが開きません。 リンク元にマウスを置くと、指のマークの中に小さく [w] の文字が現れます。 このリンクを有効にするには、どのようにすれば良いのでしょうか。 ※ なお、ブックマークをつけてハイパーリンクを設定した同一文書内でのリンクは、有効に機能します。
- ベストアンサー
- その他（インターネット・Webサービス）
お礼
参考 URL ありがとうございます。 質問する前にかなりググったのですが見つけることが できませんでした。まさに質問の回答そのものでした。 コードは今の知識では理解できないので、ゆっくりと 調べてみます。きっと簡単な方法が用意されているに 違いないと思っていたのですが、予想外でした。