JavascriptでHTMLソースからhrefの値を取得する方法

前へ 次へ
このQ&Aのポイント
  • JavascriptのAjax.Requestを使用してHTMLソースからhrefの値を取得する方法について教えてください。
  • Javascriptで取得した別ページのHTMLタグから必要な部分のみhrefの値を取得し、配列に格納することは可能でしょうか？
  • 例えば、http://test/index.htmから取得したHTMLタグの中のhrefの値のうち、http://test/index2.htmとhttp://test/index3.htmのみを配列に格納する方法を教えてください。
回答を見る
  • ベストアンサー

Ajax.Requestで取得したHTMLソースから'href'の値を

Ajax.Requestで取得したHTMLソースから'href'の値を取得する方法について Javascriptにて取得した別ページのHTMLタグから 必要な部分のみ値を取得し、配列に格納することは可能でしょうか？ 以下Javascript ------ var url = "http://test/index.htm"; new Ajax.Request( url, { "method":"get", asynchronous:false, onComplete: function(request) { html = request.responseText; } } ); alert(html); ------ 以下"http://test/index.htm"のHTMLタグ ------ <html> <head> </head> <body> <a href='http://test/index2.htm'>index2</a> <a href='http://test/index3.htm'>index3</a> <div>index4</div> </body> </html> ------ 上記で"http://test/index.htm"のHTMLタグの全てを取得して出力することはできたのですが、 "href"の"http://test/index2.htm" "href"の"http://test/index3.htm"のみ配列に格納したいのです。 よろしくお願いいたします。

  • AJAX
  • 回答数1
  • ありがとう数5

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

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

こんなのしか思いつきませんでした。 <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("prototype","1.6.0.3"); </script> <script type="text/javascript"> google.load("prototype","1.6.0.3"); var url = "/index.htm"; var result=[]; new Ajax.Request(url,{"method":"get",asynchronous:false, 　onComplete:function(request){ 　//var doc = document.implementation.createDocument('http://www.w3.org/1999/xhtml','html',null); 　var div=document.createElement("div"); 　doc.innerHTML=request.responseText; 　var links=doc.getElementsByTagName("a"); 　for(var i=0;i<links.length;i++) 　 result.push(links[i].href); 　} }); </script>

noyome
質問者

お礼

できました！ありがとうございます！

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. AJAX

関連するQ&A

  • Ajax的な手法で取得したHTMLの表示

    いつもお世話になっております。 XMLHttpRequestで非同期に取得したHTMLをポップアップのように表示させたいのですが、方法がよくわかりません。 <div id="popup"> THIS IS AJAX TEST!! </div> というテキストが取得できるとしたらこのテキストはHTMLとしては認識されていないのでしょうか？ pop = document.getElementById('popup'); document.body.appendChild(pop); とやれば表示されるかと思いましたがうまく行きません。 下手な質問になってしまいました。。とにかく、非同期で取得したHTML をJavascriptから操作する方法を教えていただけると嬉しいです。

  • Ajax.Updater で受けたHTML中のスクリプトを動かしたい

    Prototype.js の Ajax.Updater で受け取ったコンテンツの中で <script type="text/javascript"> .... の関数を動かしたいのですが、上手くいきません。 Ajax.Updater で受け取った下のようなHTMLをページに埋め込んで、クリックするとオブジェクトが見つかりませんと言われてしまいます。 <a href="javascript:void(intest('OK'))">テスト</a> <script type="text/javascript"> var args; function intest (args) { alert(args) } </script> どうしたら動くようになるんでしょうか？

  • jqueryでhrefの値を取得して代入する方法

    jquery 初級者です。 下の様なaタグをクリックした時に、（リンク先に移動し）hrefの値と紐付けされているdivを開きたいのですが、どうしてもうまくいきません。 <a class="btn" href="#contents">開く</a> <div id="contents" style="display:none;"> 開きたいコンテンツ。通常は見えない。 </div> ※実際はこうしたリンク要素がたくさんあるため、hrefの値を取得する形にしたいのです。 どなたか詳しい方宜しくお願い致します。

  • html内の値を取得

    下記開発環境で開発を行っています。 VS2005 vb.net あるString型の変数に値が入っています。 その値は下記のようなhtmlです。 <html>　←ここから <head></head> <body> <div id='test1'> OK </div> </body></html>　←ここまで 実装したいことは　<div id='test1'>　で囲まれた”ＯＫ”という値を取得することです。 文字列をHtmlDocumentに格納するとGetAttributeメソッドで取得できるのらしいですが、 方法がわかりません。←すみません、表現がただしくないかもしれません。 どなたかご存知の方ご教授お願い致します。

  • HTMLのソースの取得・正規表現

    プログラム自体始めて間もない初心者です。 javascriptでHTMLのソースを取得して、正規表現でマッチしたURLを書き出したいと思います。 取得したソースから正規表現で抽出はできましたが、さらに手を加えると機能しませんでした。 下記test-1では「http://abc.com/」と表示されましたので思った通りに動きました。 しかし、test-2では「http」と表示されると思っていたところ、表示されませんでした。 この違いはなんでしょうか？ //////////////////// test-1 <html> <head> <script type="text/javascript"> function test(){ aaa = document.getElementsByTagName("html")[0].innerHTML; bbb = aaa.match(/http:\/\/abc\.com\//); document.write(bbb); } </script> </head> <body> <input type="button" onclick="test()"> <a href="http://abc.com/"> </body> </html> //////////////////// test-2 function test(){ aaa = document.getElementsByTagName("html")[0].innerHTML; bbb = aaa.match(/http:\/\/abc\.com\//); ccc = bbb.match(/http/); document.write(ccc); }

  • AjaxでXMLの要素が取得できない

    いつもお世話になっております。 Ajaxを勉強しているのですが、prototype.jsを使用し、XMLを読み込んで データを表示させることができず困っております。 ソースは以下の通りです。 logdate.xml <?xml version="1.0" encoding="UTF-8"?> <namelists> <namelist> <name>山田</name> <ten>50</ten> </namelist> <namelist> <name>鈴木</name> <ten>48</ten> </namelist> </namelists> hoge.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Solutoire.com Plotr &rsaquo; LineChart Example</title> <link type="text/css" rel="stylesheet" href="style.css" /> <script src="./lib/prototype/prototype.js" type="text/javascript"></script> <script type="text/javascript"><!-- function getFile() { new Ajax.Request("logdate.xml", { method: "get", onComplete: displayData }); } function displayData(httpObj) { var XML = httpObj.responseXML; var itemsTag = XML.getElementsByTagName("namelists"); $("result").innerHTML = itemsTag.length; } // --></script> </head> <body> <a HREF="logdate.xml">a</a> <form> <input type="button" value="読み込み" onClick="getFile()"> </form> <div id="result"></div> </body> </html> 結果は0となってしまいます。 ネットで調べたりしましたが、原因がつかめません。 どのようにしたらよいのでしょうか？どなたか教えてください。 宜しくお願い致します。

  • jqueryの$.ajaxでPHPに値を渡したい

    下記の様にjquery(ver1.4.x)の$.ajax関数を使って、 ajaxでPHPに値を渡したいと思っています。 ■Javascript （中略） $.ajax({ type:"POST", url:"test.php", data:{"check":check}, success:function(){ alert("OK"); } }); ■PHP（test.php） if ($_POST) { $_SESSION["data"][] = $_POST["check"]; } この時、普通の状態ならtest.phpで値が受け取れ、$_SESSION["data"]の配列内には$_POST["check"]の値が格納される事を確認しました。 しかし、ブラウザのCookieを無効（ブロック）に設定した場合のみ、$_SESSION["data"]の中には$_POST["check"]の値が入らないのです。 session_start();はJavascriptのあるHTML、test.php両方に書かれています。 クッキー無効の場合はJavascript(ajax)-PHP間でセッションは切断されてしまうのでしょうか？ php.iniの設定では session_use_cookiesもsession_use_only_cookiesもOnになっています。 詳しい方おられましたらご教授宜しくお願いします。

    • ベストアンサー
    • PHP
  • HTMLの取得と解析について

    フォームのtextareaにHTMLを入力して、そこから必要なタグを取得したいのですが上手くいきません。 textareaの値は取得できています。 textareaの値からgetElementsByTagNameを使用してtableタグを取得しようとしているのでがエラーが出ます。 chromeによると Uncaught TypeError: Object ・・・・ has no method 'getElementsByTagName' 取得した値をgetElementsByTagNameにほり込むのが間違ってるような気もするのですが、良く分かりません。 テキストエリアに入力したHTMLをパースして、再利用する良い方法がありましたらご教授ください。 以下に現状のソースを書かせて頂きます --------------------------------------------------------------------- <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript"> <!-- function test() { var org_src = document.form1.src.value; table = org_src.getElementsByTagName('table'); document.getElementById('test').innerHTML = org_src; } // --> </script> </head> <body> <p>自動出力</p> <form name="form1"> <p>テキストエリアにソースを張り付けて下さい</p> <p> <textarea id="src" rows="5" cols="30"> </textarea> </p> <p> <input type="button" value="実行" onClick="test()"> </p> </form> <div id="test"> </div> </body> </html> ---------------------------------------------------------------------

  • JavaScript で HTML ソース取得

    [環境：とりあえず WinXP/Firefox12] JavaScript で HTML ソースを取得できないかと思っているのですが、 document.getElementsByTagName('html')[0].innerHTML では思うものが取得できませんでした。 というのは、 たとえば BODY の閉じタグが欠落しているようなソースに対して上記スクリプトで取得すると BODY の閉じタグが補完されたものが返ってきたのですが、 閉じタグが欠落したままのものが欲しいのです。 可能でしょうか…。 【理由】 Firefox のアドオン Selenium IDE を利用して、 Perl で作成した Web 画面のテストを行っています。 処理が正常に終了した場合はきちんと BODY の閉じタグまで出力するのですが、 途中で想定していない例外が起きた場合はその場で die して終了するようになっています。 この時に BODY の閉じタグが欠落した状態になるので、 途中で die されたかどうかの判断の為に BODY の閉じタグの有無が知りたいのです。 なので JavaScript でなくても 「IDE 上で BODY の閉じタグの存在チェック」ができる方法があればそちらでも良いのですが… どなたかご存知の方いらっしゃいますでしょうか。 宜しくお願いします。

  • Javascriptで外部HTMLの値を取得したい

    ＷＥＢ初心者です。 Javascriptを使用して、 外部ＨＴＭＬソースを取得し、その中のある値だけを取得するロジックをご教示ください。 取得した外部ＨＴＭＬソースに正規表現が使えるなら、下記になるかと思います。 /_xyz" value="([^<]+)">/ キャプチャした値を呼び出し元のＨＴＭＬで使用したいです。 ”こんな感じのロジックになります”とご教示いただけますとたすかります。 よろしくお願いいたします。 下記サンプルプログラムを見つけたのですが、 ソース全体ではなくソースの中のある値だけが欲しいです。 --------------------------------------------------------------------------------------------- <?xml version="1.0"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>javascriptでHTMLのソースを取得</title> <script language="javascript" type="text/javascript"> function createhttprequest(){ var request=null; if("XMLHttpRequest" in window){ request= new XMLHttpRequest(); } else if("ActiveXObject" in window){ try{ request=new ActiveXobject("Msxml2.XMLHTTP"); }catch(e){ try{ request=new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){ } } } return request; } var request; function requestsorce(url){ request=createhttprequest(); request.open("GET",url,true); request.onreadystatechange=sorceget; request.send(null); } function sorceget(){ if (request.readyState == 4 && request.status == 200){ document.form1.sorce.value=request.responseText; } else{ } } </script> </head> <body> テキストボックスにurlを入力してソース取得ボタンを押してください。 <form name="form1"> <input type="text" name="urlbox" size="40"> <input type="button" value="ソース取得" onclick="requestsorce(document.form1.urlbox.value)"> <textarea name="sorce" rows="120" cols="100"> ここにソースを表示 </textarea> </form> </body> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する