JavaScript 文字列の取得方法

このQ&Aのポイント
  • JavaScriptで動的に生成したテーブル内のノードにある文字列を取得する方法について解説します。IEとFirefoxで異なる方法が必要となります。
  • IEでは、getElementByIdメソッドを使用して要素を取得し、outerTextプロパティを使用して文字列を取得します。
  • しかし、FirefoxではouterTextプロパティがサポートされていないため、innerHTMLプロパティやvalueプロパティを使用する必要があります。
回答を見る
  • ベストアンサー

JavaScript 文字列の取得方法

JavaScriptで動的に生成したテーブル内のノードにある文字列を取得しようとしています。 IEだと下記の方法で取得できます。 var lineTitle = document.getElementById("title"); var lineTitleStr = lineTitle.outerText; しかし、FirefoxだとouterTextをサポートしていないので取得できません。 outerTextをinnerHTMLやvalueとして試しましたが、取得できませんでした。 一番良いのは、IEとFirefoxのどちらでも取得できる方法を教えて頂く事ですが、Firefoxで取得できる方法を教えて頂いても助かります 。 大変困っています。どうぞ、宜しくお願いします。

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

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

状況がよくわかってませんが… var lineTitleStr = lineTitle.textContent || lineTitle.innerText; とか。

kotaete12
質問者

お礼

textContentを使って、IEとfirefoxで処理を振り分ける事で解決しました。 fujillinさんの回答が大変参考になりました。 ありがとうございました。

その他の回答 (1)

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

>outerTextをinnerHTMLやvalueとして試しましたが、取得できませんでした。 innerHTMLで普通にいけませんか? idで指定していないとか、競合しているとか <script> function clickFunc(){ var lineTitle = document.getElementById("title"); var lineTitleStr = lineTitle.innerHTML; alert(lineTitleStr); } </script> <div id="title">hogehoge</div> <input type="button" value="check" onclick="clickFunc()">

kotaete12
質問者

お礼

回答をありがとうございました。

関連するQ&A

  • 入力された文字列からリンクタグを生成

    お世話になります。 ブラウザから、一行テキストに入力された文字列を使用してリンクタグを生成する挙動を構築していますが、肝心のリンクタグ( aタグ等 )が反映されずに悩んでいます。 普段PHPでプログラミングを行っていますので、一旦PHPで変数に置き換えたり、データベースを介したり様々な方法を試みましたが、中々うまくいかずにいます。 -- 【 JavaSの定義箇所 】 ------------- <script type="text/javascript"> <!-- function textcopy(){ var text1 = document.getElementById("text1").value; document.getElementById("text1").value = ""; text1 = document.getElementById("insert1").innerHTML + text1; document.getElementById("insert1").innerHTML = "<div>" + text1 + "</div>"; var text2 = document.getElementById("text2").value; document.getElementById("text2").value = ""; text2 = document.getElementById("insert2").innerHTML + text2; document.getElementById("insert2").innerHTML = "<div>" + text2 + "</div>"; var text3 = document.getElementById("text3").value; document.getElementById("text3").value = ""; text3 = document.getElementById("insert3").innerHTML + text3; document.getElementById("insert3").innerHTML = "<div>" + text3 + "</div>"; var text4 = document.getElementById("text4").value; document.getElementById("text4").value = ""; text4 = document.getElementById("insert4").innerHTML + text4; document.getElementById("insert4").innerHTML = "<div>" + text4 + "</div>"; var text5 = document.getElementById("text5").value; document.getElementById("text5").value = ""; text5 = document.getElementById("insert5").innerHTML + text5; document.getElementById("insert5").innerHTML = "<div>" + text5 + "</div>"; } //--> </script> -- 【 form部品の箇所 】 -------------- <form> <input type="text" id="text1" value="<a href='"> <input type="text" id="text2"> <input type="text" id="text3" value="'>"> <input type="text" id="text4"> <input type="text" id="text5" value="</a>"> <br /> <div id="insert1" style="display: inline-block;"></div> <div id="insert2" style="display: inline-block;"></div> <div id="insert3" style="display: inline-block;"></div> <div id="insert4" style="display: inline-block;"></div> <div id="insert5" style="display: inline-block;"></div> <button type="button" onclick="textcopy()">submitする</button> </form> ------------------------------- 例えば、 【 <a href='http://www.hoge.com'>テスト</a> 】の様に返したいのに、 【 http://www.hoge.com'>テスト 】と返ります。 HTMLタグは特殊文字に変換してみましたが、結果は同じでした。 因みにこの挙動がうまくいったら、type属性はhiddenにして隠し要素にするつもりでした。 恐らくこの様な面倒くさい構文より簡単な書き方があるかと思いますが、 今までJavaScript自体殆どタッチしていませんでしたので、調べながら 自分で構築してみました。 ご教示の程、どうぞよろしくお願い申し上げます。

  • Safariで<iframe>のinnerHTMLを取得する方法

    MacのブラウザSafariで <iframe id="iframe1" src="test.txt" style="display:none" width="1" height="1"></iframe> で読み込んだtest.txtの内容が取得できなくて困っています。 ちなみにWindowsのIEとMacのFireFoxでは下記のようなかんじで取得できています。 IEの場合 var text = this.iframe1.document.body.innerHTML; FireFoxの場合 var text = document.getElementById("iframe1").contentDocument.body.innerHTML; MacのSafariでは上記どちらの方法でも取得できませんでした。 他にも色々調べて試してみたのですがやはり上手くいきません。 <iframe>タグ内のstyle指定をなくしてみたらiframeにテキストの内容は表示されているのであとは取得できればいいのですが。。 JavaScriptは初心者なので記述等不可思議かもしれません。 あわせてご教授いただけたらと思います。

  • Javascriptで生成されたページの情報取得方法

    Javascript初心者です。 ある画面で検索条件を指定して、送信ボタンを押下すると、検索結果をJavascriptで生成したページで表示するサイトがあります。結果はテーブルで表形式に表示されます。 この検索結果をJavascriptかVBscriptで取得したいと考えています。 HTML情報とテキスト情報両方とも取得できたらうれしいです。 document.all(1).innerHTML で取得しても、実際の画面に表示されているHTMLとは異なる情報しか取得できません。 生成後のHTML情報の取得方法をご教授ください。

  • javascriptで困っています

    スマホでタッチした場所の座標を取得しようとしているのですが、いろいろ調べて以下のように作ってみましたが、座標が取得できません。どこを直せばいいのか、教えていただきたく投稿させていただきました。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=320, user-scalable=no" /> <script type="text/javascript" charset="utf-8"> var touch_box = document.getElementById("box"); touch_box.addEventListener("touchstart", function(e){ document.getElementById("txt0").innerHTML = "スタート"; document.getElementById("txt1").innerHTML = e.pageX; document.getElementById("txt2").innerHTML = e.pageY; }, false); touch_box.addEventListener("touchmove", function(e){ document.getElementById("txt0").innerHTML = "ムーブ"; document.getElementById("txt1").innerHTML = e.pageX; document.getElementById("txt2").innerHTML = e.pageY; }, false); touch_box.addEventListener("touchend", function(e){ document.getElementById("txt0").innerHTML = "エンド"; document.getElementById("txt1").innerHTML = e.pageX; document.getElementById("txt2").innerHTML = e.pageY; }, false); </script> </head> <body> <div id="box"> <span id="txt0"></span><br /> X:<span id="txt1"></span>, Y:<span id="txt2"></span><br /> </div> </body> </html>

  • javascript初心者です。

    javascript初心者です。 特定要素の相対座標位置を取得したく、getBoundingClientRect()を使用しているのですが、firefox2.0でも、見れるようにしなくてはいけなくて、その場合、getBoundingClientRect()がfirefox2.0では使えません。 それに変わる関数などを探していましたが、わからなかったので、下記のソースを var element = document.getElementById("sample"); var elementY = element.getBoundingClientRect() 以下のように変えてみました。 var element = document.getElementById("sample"); var elementY = element.offsetTop - window.screenY; ですが、予期した値が取得できません。 ページ内で、スクロールすると、elementYが変わるようになっています。 どう書き換えたらよいか、どなたかご教授お願いいたします。

  • JavascriptのDOMについて

    JavascriptのDOMについて <textarea id="ta"></textarea> というHTMLがあり、Javascriptで、 document.getElementById("ta").value = "test"; とすれば表示されますが、この .valueプロパティを知らずに最初 .innerHTMLとしていました。 textareaのプロパティで書き込むのはvalueと知る方法が知りたいです。 知らない人は.valueすら想像できません。 皆さんは、どのようにしてプロパティを見つけているのでしょうか?

  • テーブル内のテキストを取得したい

    htmlで書かれたテーブルをドラッグして選択状態にした後、Ctrl+Cをして、 メモ帳に貼り付けると、テーブルの見た目のままテキストだけが取得できますよね? これと同じように、あるボタンをクリックしたときに、テーブル内のテキストを見た目とおなじように (行や改行など)取得したいのですが、 javascriptでやる方法はないでしょうか? なお、以下のようにすると、テキストのみではなく、 テーブル内に含まれるhtmlのタグ名などのテキストも全て取得してしまいます。  テーブル名 tablename  var ans = ""; var Tbl=document.getElementById(tablename); for(var i=0;i< Tbl.rows.length;i++){ ans=Tbl.rows[i].innerHTML+"\n"; }

  • Javascript 計算後の3桁区切り

    ホームページ用見積もりフォームをJavascriptで自動計算 縦に長いページで一番下に計算結果を表示 ページをスクロールしても、何時でも計算結果が見られるように、別のウィンドウ(レイヤー)でページ内に表示。 以上までは出来ました。 最後に計算結果を3桁区切りで表示させたいのですが、上手く出来ません。 お知恵をお貸しくださいませ。 Javascriptは外部参照しております。 3桁区切りのJavascriptを外部参照している同一のページに記入した方が良いか、別参照の方が良いかも教えていただければ幸いです。 以下がJavascriptのコードになります。 function keisan(){ // 設定開始 var tax = 5; // 消費税率 // 商品1 var price1 = document.form1.goods1.options[document.form1.goods1.selectedIndex].value; // 商品2 var price2 = document.form1.goods2.options[document.form1.goods2.selectedIndex].value; // 商品3 var price3 = document.form1.goods3.options[document.form1.goods3.selectedIndex].value; // 合計を計算 var total1 = parseInt(price1) + parseInt(price2) + parseInt(price3) ; // 設定終了 document.form1.field_total1.value = total1; // 合計を表示 var tax2 = Math.round((total1 * tax) / 100); document.form1.field_tax.value = tax2; // 消費税を表示 document.form1.field_total2.value = total1 + tax2; // 税込合計を表示 //右の窓に表示する金額 document.getElementById("display_account_amount").innerHTML = total1; document.getElementById("display_account_tax").innerHTML = tax2; document.getElementById("display_account_all").innerHTML = total1 + tax2; }

  • JavaScript表示切替の問題

    ボタンを押すたびに、こんにちはとこんばんはが切り替わるようにしたいのですが、 切り替わりません。なぜかわかる方がいたら教えて頂けると助かります。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <div id="1">こんにちは</div> <input type="button" value="切替" onclick="func_switch()"> <script language="javascript" type="text/javascript"> function func_switch(){ if(document.getElementById(1).innerHTML="こんにちは"){ document.getElementById(1).innerHTML="こんばんは"; } else{ document.getElementById(1).innerHTML="こんばんは"; } } </script> </body> </html>

  • Javascriptで文字の書き換え

    現在、IE8とChromeを使用しています。 どちらのブラウザで試してもdocument.write("文");は読み込みますが <id>で指定したタグの中身が変わりません。 javascriptに書いたinnerHTML及びinnerTextの使い方か、もしくは、 根本的なところを何処か間違っているでしょうか? -----------HTML文------------------------------------------------------ <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>2011_09_02_1</title> <link rel="stylesheet" href="2011_09_02_1.css"> <script type="text/javascript" src="2011_09_02_1.js"></script> <body> <div id="str"><h3>Good morning</h3></div> </body> </html> ---------------外部CSS文----------------------------------------------- div h3{ color:#0000ff; } ---------------外部javascript文------------------------------------------ //タグを含む書き換え用ソース document.write("読み込むかテスト"); var chenge; chenge = document.getElementById(str); chenge.innerHTML = "Good Night"; ---------------------------------------------------------- //下は後から試した文--------文字のみ書き換え用ソース document.write("読み込むかテスト"); //document.getElementById("str").innerText = "Good Night"; --------------------------------------------------------------------------

専門家に質問してみよう