jQueryでのデータ抽出に悩んでいます

2010/06/26 00:46

このQ&Aのポイント

現在、jQueryを使用して.getメソッドを実行していますが、コールバック関数で返されるデータの一部を取得する方法について悩んでいます。
データには自作のHTMLが含まれており、特定の部分を取り出してinnerHTMLで表示したいと考えています。
正規表現を使用して試みましたが、idが付いている部分の取得が上手くいかず、解決策を探しています。

現在、jqueryで.getする際に、コールバック関数で帰ってくる値に

現在、jqueryで.getする際に、コールバック関数で帰ってくる値に関して、うまくデータが抽出できず悩んでいるためご教授いただければと思います。具体的には、 function test() { $.get("http://example.org/index.php?index=true", { user_id: user_id}, function(data){ //alert("Data Loaded: " + data); $("#contents").html(data); }); } のようにして、関数を作り、イベントハンドラとして関数を定義しているのですが、コールバック関数の引数に当たる変数dataの一部を取り出したく悩んでおります。変数dataには自分で書いたHTMLがまるごと入っていて、 $("#contents").html(data); document.getElementById("contents").innerHTML = data; などによってその時点で構築されているDOMを描写し直すことはできますが、できれば、その描写の前にdataの一部を取り出して、それをinnerHTMLで吐き出したいと考えています。 dataの中身はalertで書き出すと、 -------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> 省略 </head> <body> <div class="main_bg"><div id="contents" class="container"> <div id="header_top"> 省略 </div> <div id="log_remarks"> 省略 <div>aaa</div> <div>bbb</div> </div> -------------- のようになっていて、 <div id="log_remarks"> 省略 </div> ここの部分だけを抽出し、それをinnerHTMLで吐き出せればと思い、 varr basehtml = obj.data; alert( basehtml.match(/\<div\sid*(.*)\<\/div\>/) ); alert(basehtml.match(/\<div\sid="log_remark(.*)\<\/div\>/i)); などいくつも正規表現で試してみましたが、idがつくとどうしてもうまくいかず悩んでおります。 idがなければ、match(/?<title?>(.*)?<?/title?>/i) のようにしてマッチさせられるかと思いますが、idが付いてしかも適切な閉じタグまでを取り込む方法が思いつかない状態です。もちろん、 $("#contents").html(data); としたあとであれば、 #log_remarksはDOMでたどり着くことができますが、描写の前の段階で抽出できる良い方法がありましたら、ご教授いただけると嬉しく思います。自力で解決できず申し訳ありませんが、何かありましたら、ご助言頂けると嬉しく思います。宜しくお願い致します。

mduk55
お礼率0% (0/3)

JavaScript
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

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

ベストアンサー

steel_gray
ベストアンサー率66% (1052/1578)

2010/06/26 12:49 回答No.2

読み込むだけじゃなくて置き換えだったんですね。でしたら $( '#log_remarks' ) . replaceWith( $('#log_remarks',$(data)) ); で、置き換えできます。 #log_remarksが常にあるとは限らないなら #contentsの中身をempty()で削除してから、前回の要領で追加かな。 http://semooh.jp/jquery/api/manipulation/replaceWith/content/ http://semooh.jp/jquery/api/manipulation/empty/_/

質問者

補足 2010/06/26 13:34

ご丁寧にありがとうございます。結論から言いますと無事できました。まだmac環境で、firefox3, safari5, chrome5でしか確認してませんが、今のところ問題なく動いております。 $('#log_remarks',$(data))という表現がjqueryで使えるというのは本当に勉強になりました。dataオブジェクトのうちの#log_remarks部分ということですよね。 >#log_remarksが常にあるとは限らないなら >#contentsの中身をempty()で削除してから、前回の要領で追加かな。確かに#contentsをemptyにしてもよいのですが、そうすると、書き換えたくない場所まで書き換えられてしまって、#log_remarksだけに限定したかったんですよね。究極innerHTMLで2度DOM描写すれば、#contents書き換え→#log_remark書き換えも可能でしたので。ただ、#testのところは書き換えたくないとか色々悩んでいて、今回質問させて頂いた次第です。これだと、#log_remarksだけじゃなくて、#want-rewriteもdataから取ってきて、上書きすることもできますもんね。最近またjavascript触れたり、jquery使ってみて、javascriptって実は面白い言語なんじゃないかと思ってきました。今後のためにももっと勉強してみます。本当にありがとうございます。

その他の回答 (1)

steel_gray
ベストアンサー率66% (1052/1578)

2010/06/26 06:00 回答No.1

こんな感じ？ $( '#log_remarks' , $(data) ) . appendTo( '#contents' );

質問者

補足 2010/06/26 12:15

ご返信ありがとうございます。あと変数dataではなく、関数の引数dataでしたね。申し訳ありません。試してみましたが、これだと#contentsの下に追加されてしまいますね。可能であれば、追加するのでなく、#contentsのなかにある#log_remarksを置き換えたいので。 appendToなのでしょうがないかもしれないのですが、もうちょっと考えてみます。でも、そのようなjqueryの使い方もあるというのは、勉強になります。$( '#log_remarks' , $(data) ) という書き方もできるんですね。今DOMで既に描写されている#contentsのうち、#log_remarksだけを書き換えたいのですが、 dataがDOC宣言から始まる素のHTMLなので、このあたりをもう一回整理して、ちょっと考えてみます。引き続き何かありましたらご教授頂けますと嬉しく思います。