※ ChatGPTを利用し、要約された質問です(原文:現在、jqueryで.getする際に、コールバック関数で帰ってくる値に)
jQueryでのデータ抽出に悩んでいます
この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><!-- end of #log_remarks -->
--------------
のようになっていて、
<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でたどり着くことができますが、描写の前の段階で抽出できる良い方法がありましたら、ご教授いただけると嬉しく思います。
自力で解決できず申し訳ありませんが、何かありましたら、ご助言頂けると嬉しく思います。
宜しくお願い致します。
補足
ご丁寧にありがとうございます。結論から言いますと無事できました。まだ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って実は面白い言語なんじゃないかと思ってきました。今後のためにももっと勉強してみます。 本当にありがとうございます。