HTMLの取得と解析について
- フォームのtextareaにHTMLを入力して、必要なタグを取得する方法についての質問です。
- テキストエリアの値からgetElementsByTagNameを使用してtableタグを取得しようとしていますが、エラーが出ています。
- パースして再利用する良い方法があれば教えてください。
- ベストアンサー
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> ---------------------------------------------------------------------
- googleoooo
- お礼率46% (74/160)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
textareaの内容を、ダミーの要素に突っ込めば DOM ツリーの中に入りますね。 （下の例では createElemetしましたが、<div id="scratchPad" style="display:none"> などの要素を予め用意してもok） function test() { var buf = document.createElement('div'); // ダミーの要素を生成して buf.innerHTML = document.form1.src.value; // 貼りつけた内容を突っ込む elm = buf.getElementsByTagName('table')[0]; // （注：[0]で最初のTABLEだけを拾ってます） dv = document.getElementById('test'); // ここに結果を入れる…のだけど if (window.navigator.userAgent.toLowerCase().match("firefox")) { dv.removeChild(dv.childNodes[0]); // どんどん増えるとまずいのでremoveChildしておく dv.appendChild(elm); // 子要素として追加 }else{ dv.innerHTML = elm.outerHTML; // 貼り付け } } /* 上記 if A else B について、 Firefox 8.0 では A のみ成功 IE 8.0 では B のみ成功 Google Chrome 15.0, Opera 11.52 は A, B ともに成功 */
その他の回答 (1)
- t_ohta
- ベストアンサー率38% (5078/13267)
getElementsByTagNameはDOMツリーの中から指定されたタグを探し出すファンクションです。 org_src の中身はテキストデータであって、ドキュメントオブジェクトでは無いのでgetElementsByTagNameは使えません。 org_src の中身から正規表現などを使ってtableタグを抽出する必要があります。
お礼
回答有難うございます。 正規表現を使わないとダメなんですね。 DOMツリー化する方法があれば楽なんですが、とりあえず正規表現で頑張ってみます
関連するQ&A
- HTML内の値を取得し、別の箇所にコピーする方法
下記のソースで書き換え実行ボタンを押下すると、2行目の表示内容を1行目にコピーした上で、2行目の内容を削除したいと思いました。 2行目の内容の削除は下記の3行で出来ていると思います。 $("#text2_1").html(""); $("#text2_2").val(""); $("#text2_3").val(""); ただし、2行目の内容を1行目にコピーする所がわかりませんでした。 $("#text1_1").html("2行目"); $("#text1_2").val("2行目"); $("#text1_3").val("2行目"); 上記3行の「2行目」と固定で記述されている箇所の代わりに、下記3行の値を取得する記述をしないといけないのかと思ったのですが、どのように記述すればよいかわからなかったのでアドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。 <div id="text2_1">2行目</div> <input type="text" name="text2_2" id="text2_2" value="2行目" /> <input type="hidden" name="text2_3" id="text2_3" value="2行目" /> 【ソース】 <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script language="JavaScript" type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> <!-- $(function(){ $("#change").click(function(){ $("#text1_1").html("2行目"); $("#text1_2").val("2行目"); $("#text1_3").val("2行目"); $("#text2_1").html(""); $("#text2_2").val(""); $("#text2_3").val(""); }); }); // --> </script> <title>title</title> </head> <body> <form> <input id="change" type="button" value="書き換え実行" /> </form> <br /> <div id="text1_1">1行目</div> <input type="text" name="text1_2" id="text1_2" value="1行目" /> <input type="hidden" name="text1_3" id="text1_3" value="1行目" /> <div id="text2_1">2行目</div> <input type="text" name="text2_2" id="text2_2" value="2行目" /> <input type="hidden" name="text2_3" id="text2_3" value="2行目" /> </body> </html> 以上、宜しくお願いします。
- ベストアンサー
- AJAX
- HTMLソースにない文字がブラウザ画面に表示
HTMLのソースについて DOMソースについて ある画面のHTMLについて質問です。HTML自体には、閉じるタグが漏れているとかそういったミスが ないことを確認済。 対象のHTMLをブラウザで見ると一番先頭に「/」（半角スラッシュ）が入っています。HTML自体をどんなにみても 余計なスラッシュはありません。見落としがあるといけないので検索をしてみたのですがやはりありません。これは間違いありません。 IE１０ DebugBarを使用しDOMソースというのをみると、<body>のすぐ下に「/」がありその下に<meta ・・・ が続いています。 FireFoxで見てもやはり「/」は画面の一番上に表示されています。インスペクタでみるとIE同様 <meta ・・・ <link ・・・ が、bodyタグ、スラッシュ、の次に続きます。 画面で右クリックしソースをみると 一番先頭に「/」があり次に <!DOCTYPE ・・・と続きます。 すごく困っているのは このスラッシュを取り除きたいのですが、どうしたらいいのでしょうか？ bodyの中を空にしてみたのですがやはり画面でみると先頭に半角スラッシュが登場します。 ほんとうにわからず質問させていただきました。 次に どうしてこのような現象が起きるのでしょうか？ HTMLの先頭部分は以下のとおりです。 bodyタグの中は簡単なtebleです ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ｘｘｘｘｘｘｘ</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta name="robots" content="noindex,nofollow"> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <script type="text/javascript" src="js/xxx.js"></script> <script type="text/javascript" src="js/xxxxxx.js"></script> </head> <body> <div> <table> (略） </table> </div> </body> </html>
- 締切済み
- HTML
- documentオブジェクトについて
以下ページを作成しました。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>テストページ</title> </head> <body> <h1>テストページ</h1> <p>筆記用具を3つ下に表示します。</p> <script type="text/javascript"> <!-- document.write("鉛筆,消しゴム,定規"); --> </script> <hr> <p>ボタンを押すと食べ物、飲み物を表示します</p> <p><input type="button" value="表示" onclick="document.textarea1.value='米、パン、お茶"></p> <p><textarea cols="40" rows="4" name="textarea1"></textarea></p> <hr> </body> </html> ==============↑ここまで 質問：documentオブジェクトの使い方がわからないのです。 検証：動作を調べようとして以下検証しました ・検証1 上記ソース最後部分の、 <input type="button" value="表示" onclick="document.textarea1.value='米、パン、お茶">を 押すことで、textareaに「米、パン、お茶」を表示したいのですが、 documentがついたままだと、エラーを吐き、documentを抜いた、「textarea1.value」で実行するとエラーにならないのです。 なぜ、documentがあるとエラーになるのでしょうか。 documentは、現在表示されているページの全体をさしている(キャンバスみたいなかんじで)と認識しています。 そのドキュメント上にtextarea1があるので、document.textarea1.valueはエラーにならないと踏んだのです。 ・検証2 次に、ドキュメント上にForm１をひとつ作成し、その中にテキストエリアを作成しました。 form1タグを付けたので、「document.form1.textarea1.value」と考え、実行したところ textare1の中に、文字が表示されエラーにはなりませんでした。 ・検証1と2より よって、documentは、formがないとエラーになるのかと考えました。 ●別項目学習中に しかし参考書の途中別項目で、「document.three.src="画像ファイル"」 と、documentの次の「three」はimgタグのnameなのですが、エラーがでず実行されました。 なぜ、 「document.three」というのがきてもエラーにならないのでしょう。 ・質問 「document.textarea1.value」と「document.three.src="画像ファイル"」では 何が違うのでしょうか。documnetの後ろに来てるものは、同じオブジェクトだと思うのですが。 テキストエリアタグと、imgタグで、documentの書き方が変わるのでしょうか。 どなたかお分かりの方がいらっしゃいましたら ご教授お願いします。
- ベストアンサー
- JavaScript
- HTMLの書き方について質問です(初心者)。
[HTML & スタイルシート トレーニングブック]という本を見ながらHTMLを勉強中です。 この本ではHTMLの書き出し部分は下記のようになっております。 ================================================================================== [ 1 ] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 [ 2 ] Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> [ 3 ] <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> [ 4 ]<head> [ 5 ]<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> [ 6 ]<title>Osteria Grazie［イタリア料理の店］</title> [ 7 ]<link href="message.css" rel="stylesheet" type="text/css" /> [ 8 ]</head> ================================================================================== ところがこのままテキストで書き写し使用しても正しく表示されません。 （具体的に言うと感じやひらがなが文字化けしてしまいます。） こちらの [ 5 ] を下記のように修正すると正しく出力することができます。 ================================================================================== [ 5 ]<meta http-equiv="Content-Type" content="text/html; charset="utf-8" /> ↑[ここに[ " ]を書き加える。 ================================================================================== ただし、サンプルディスクに入っているhtmlデータは上記のままで動きます。 どうしてなのでしょうか？ 分かる方がいらっしゃいましたら回答お願いします。 また、修正後の ================================================================================== [ 5 ]<meta http-equiv="Content-Type" content="text/html; charset="utf-8" /> ↑[ ? ] ↑[ここに[ " ]を書き加える。 ================================================================================== につきましても、これで正しく表示されるのはいいのですが、そうなると上記の[ ? ]部分の[ " ]の閉じ部分がなくなってしまう気がするのですが、なぜこれで動くのでしょうか？ よろしくお願いします。 一応下に本に付いていたサンプルデータを書き出しておきます。 分かる方がいらっしゃいましたらお願いします。 【サンプルデータ】 ================================================================================== <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Osteria Grazie［イタリア料理の店］</title> <link href="message.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="contents"> <h1>Message</h1> <h2>ご意見ご感想をお書きください</h2> <form action="mailto:sotechsha@html.sever" method="post" enctype="text/plain"> ■名前<br /> <input type="text" name="name1" size="30" /><br /> ■メールアドレス<br /> <input type="text" name="email" size="30" /><br /> ■メッセージをお願いします<br /> <textarea name="message" rows="6" cols="50"></textarea><br /> </form> <div id="gotop"> <a href="index.html">Topページにもどる</a> </div> </div> </body> </html> ==================================================================================
- ベストアンサー
- HTML
- HTML5メールフォームの作り方
お世話になります。HTML5のテンプレートを使用してメールフォームを作成しようとしておりますが、なかなかうまくいきません。action=""にメールアドレスを入れてみましたが、できませんでした。どなたかお分かりの方いらっしゃいましたら、どうかよろしくお願い致します。 <form id="contact" action="contact.html" method="post"> <div class="form_settings"> <p><span>Name</span><input class="contact" type="text" name="your_name" value="" /></p> <p><span>Email Address</span><input class="contact" type="text" name="your_email" value="" /></p> <p><span>Message</span><textarea class="contact textarea" rows="5" cols="50" name="your_message"></textarea></p> <p style="padding-top: 15px"><span> </span><input class="submit" type="submit" name="contact_submitted" value="send" /></p> </div> </form>
- ベストアンサー
- HTML
- 画像がうまく取込めない（HTMLに関する質問）
お早う御座います。 掲示板をPHPで作成中です。 コメントと同時に動物のイメージの添付を考えています。 コメント記入欄の上に動物のイメージを「1段横３列」に置きたいのですが、 うまく表示されません。 どこが悪いのでしょうか、ファイルがpngだとHTMLに取り込めないということでしょうか。 CSSの書き方、書く場所を色々と変えても動作しません。 宜しくお願いします。 ================================================================== <?php ・ ・ ?> <HTML> <HEAD> <META HTTP-EQUIV='Content-Type' CONTENT='text/html;charset=UTF-8'> <TITLE>投稿アップ</TITLE> <STYLE type="text/css"> <!-- div.imgbox{potision : abusolute ; top : 30 px; left : 300 px; } --> </STYLE> </HEAD> <BODY STYLE='background-color:lightgreen'> <div img class="imgbox"> <TR><TH><src="hippo1.png" width="50" height="50"></TH> <TH><src="hippo2.png" width="50" height="50"></TH> <TH><src="hippo3.png" width="50" height="50"></TH></TR></div> <?php ・ ・ ?> <P STYLE="color:pink;font-size:30px">掲示板</P> ・ ・ </FORM> <?php ・ ・ ?> </BODY> </HTML>
- ベストアンサー
- PHP
- JavaScriptからPerlへデータを送る方法について
プログラミング初心者です。 HTMLで書いたフォームの中にあるテキストエリアのデータを、JavaScriptでデータを取り出して、それをPerlで受け取りたいのですが、方法に見当がつきません。 以下は書いてみたソースコードです。 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>Form Test</title> <script type="text/javascript" src="JS/sample.js"></script> </head> <body> <form name=form1> <textarea name="comment" rows="3" cols="30">文字の入力</textarea> <input type="button" value="ボタン" onClick="Button()"> </form> </body> </html> JavaScriptファイル function Button(){ var comment = document.form1.comment.value; alert(comment); //値がとれてるか確認したかっただけです } Perlに関しては、#!/usr/bin/perl ぐらいしか、まだ分かりません。 よろしければ、JavaScriptからのデータ送信、Perlでのデータ受け取り方法を教えていただけないでしょうか。この質問に対して有効なサイトがあれば合わせて教えていただきたくおもいます。 よろしくお願いします。
- ベストアンサー
- JavaScript
- PHPで求めた変数をHTMLで使う方法
HTMLのformタグで与えた引数を元に、ある値をPHPで求めた後、その求めた変数をHTMLに戻って使う方法をご教授下さい。 例えば、 index.html ↓↓↓ <form action="submit.php" method="post"> <input type="text" name="xxxxx"> <input type="text" name="yyyyy"> <input tyoe="submit" value="実行"> </form> <textarea name="answer"> 実行後ここに、下のPHPで求めた$zzzzzを表示したい。 </textarea> 上のHTMLでxxxxxとyyyyyを入力して実行ボタンを押します。 そしてPHP側は、 submit.php ↓↓↓ $zzzzz = $_POST["xxxxx"] . "は、" . $_POST["yyyyy"] . "です。"; このように求めた$zzzzzを上のHTMLに戻って表示したいのですが、しばらく調べてみても見つかりませんでした。 どなたかご教授下さい、お願いします。
- 締切済み
- HTML
- ＡＳＰでＨＴＭＬの内容を取得するには？？
HTMLのテキスト１のテキストボックスはOnClickイベントで文字列を取得し表示させてます。 テキスト２のテキストボックスに文字列を入れてその文字列をtest.aspで取得させてます。 test.aspでもテキスト１の内容を取得する方法はありますでしょうか？？ formの入れ子はできないし、１つのform内でテキスト１、テキスト２を入れると OnClickイベントがきかなくなります。 わかる方おりましたらご教示ください＞＜ 宜しくお願い致します。 ------ aa.html ---------------- <html> <head> <title>ASP TEST </title> </head> <body> <form name="fm1"> <td> <p>テキスト１：<input type="text" name="pathTXT" size="40"> <input type="button" name="fileBT" value="選択"> </p> </td> </form> <form action="test.asp" method="post"> <td> <p>テキスト２：<input type="text" name="keyTXT" size="40"> <input type="submit" value="実行"> </p> </td> </form> </body> </html> <SCRIPT LANGUAGE="vbscript"> Sub fileBT_OnClick() Document.fm1.pathTXT.value = "aaaaaaaa" End sub </SCRIPT> ------ test.asp ---------------- <%@LANGUAGE="VBSCRIPT"> <% Response.Write(Request.Form(keyTXT)) '''↓↓↓↓↓↓↓↓↓ aa.htmlのpathTXTを取得したい。。。 Response.Write(Request.Form(pathTXT)) >%
- ベストアンサー
- HTML
- Safariで、Textareaのボーダーを消したい
Safari上で、TextAreaのボーダーを消したいと思い試行錯誤しております。 下記HTMLで、Windows IE6、IE7、FF2、Mac IE5 で うまくボーダーが消せるのですが、Safariがうまく消せません。 お分かりの方、ご教授いただけますでしょうか。 ※Appleのサイトは、Safariでもうまく消せているみたいなのですが、 ソースを見ても理解できませんでした。 http://www.apple.com/jp/ ▼HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>test</title> </head> <body> <div style="background:#eeeeee; padding:10px;"> <form action=""> <input type="text" style=" border: 0; width:260px;"> </form> </div> </body> </html>
- ベストアンサー
- CSS
お礼
回答有難うございます。 DOMツリー化できるんですね！！！ やってみると、私の方でも取得できました。 本当にありがとうございました。