JavaScriptで要素の文字列の取得方法

前へ 次へ
このQ&Aのポイント
  • JavaScriptとGreasemonkeyを使って、要素の文字列を取得する方法について質問します。
  • タグ自体はXPathを使って取得できるが、「ほげほげ」部分の文字列を取得する方法を知りたいです。
  • 「ほげほげ」から特定の部分を取り出す方法を教えてください。
回答を見る
  • ベストアンサー

javascriptで要素の文字列の取得方法

現在、javascriptとgreasemonkeyを勉強中なのですが、以下のソースでp要素の文字列？にある一部分を取り出して、 他サイトに繋がるリンクを作成したいと思っています。 XPathを使用して、タグ自体は取得できたのですが、サンプルソースの「ほげほげ」部分はどうしたら、取得できるのでしょうか？ XPathを使用しなくても取得できるでしょうか？ また、「ほげほげ」から○○部分を取り出したいのですが、取り出したい物はページごとに違うのでどのようなコードを書けばいいか分かりません。 しかし前後の文字列は一定です。 サンプルソース <html> <body> <div><p>ほげほげ○○</p></div> 　： 　： ほげほげ部分は、実際はクエリにたいに「search?p=hogehoge&type=&id=○○」となっています。 説明不足でわかりにくいとは思いますが、ご教授よろしくお願いします。

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

  • ベストアンサー
  • notnot
  • ベストアンサー率47% (4848/10261)
回答No.1

pタグが取れているのなら、その textContent プロパティで、タグに囲まれた文字列が取れます。 var s="search?p=hogehoge&type=&id=○○"; の○○を取り出すのは、 var i=s.indexOf("&id="); var marumaru=a.substr(i+4)

drawin-7-g
質問者

お礼

回答ありがとうございます。 教えられたtextContentで無事取得できました。 サンプルコードも提示していただき、改めて勉強不足を痛感しました。 しかし、なんとか自分がしたかったgreasemonkeyができました。 本当にありがとうございました。

その他の回答 (1)

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

もっと簡単な判別条件が他にあるのかも知れませんが、質問文からだけでは確定できないので… p要素が変数elementに取得できていると仮定して、以下のような感じでしょうか。 var search, s, pair, i, value=null; search = element.textContent || element.innerText; if(search && (search=search.match(/\?(.+)$/))){ search = search[1].split("&"); for(i=0; search[i];){ pair = search[i++].split("="); if(pair[0] === "id") value = pair[1]; } } alert(value);

drawin-7-g
質問者

お礼

回答ありがとうございます。 一応notnotさんの回答で目的の結果が得られましたので、申し訳ありませんがnotnotさんをベストアンサーにさせていただきました。 正規表現を使った方法も今後のコードを書く場合の参考にしたいと思います。 ありがとうございました。

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

関連するQ&A

  • 条件付きで要素を取得したい

    条件付きで要素を取得したい 次のようなHTMLで、divのclassが「b」内のh2の要素が「ccc」の場合のdivのクラスが「d」の要素を取得したいのです。 つまり下の例では、「111」と「333」を取得したいです。 queryにどのように記述すれば良いのでしょうか？ $document =<<<EOF <div class=a> 　<div class=b> 　　<h2 class=c>ccc</h2> 　　<div class=d>111</div> 　</div> 　<div class=b> 　　<h2 class=c>ccc[a]</h2> 　　<div class=d>222</div> 　</div> 　<div class=b> 　　<h2 class=c>ccc</h2> 　　<div class=d>333</div> 　</div> </div> EOF; $xpath = new DOMXPath($document); $xpath->query('ここの記述が知りたい');

    • ベストアンサー
    • PHP
  • javascriptでクエリ文字列を取得できますか？

    javascriptでURLの末尾に付与した?以降の文字列、いわゆる"クエリ文字列"を取得する事は出来ますか？ 出来る場合、構文を教えて下さい。

  • javascriptで文字列を書き換えたい

    Greasemonkeyを使って、とあるサイトの文字列を書き換えたいのですが、javascriptがまったくわからないためどう記述していいのかわかりません。 <li> 　├<input id="aaa" type="checkbox" value="2048" name="bbb"> 　└<label for="aaa">ccc</label> ソースを確認するとこうなっています。 この「ccc」を「ddd」に書き換えるにはどのように記述すればいいのでしょうか？ firefoxですので、innertextは使えないみたいです。

  • javascriptでサイトの文字列の取得方法

    今javascriptをやっていて別フレームのサイトから文字列を取得できないか試しています プログラムの参考にしたサイトは、ここ http://fayn.s59.xrea.com/x/tips/javascript/js1.php なんですが、右フレームと左フレームがあって、右には文字があり、左にはボタンがあります。 右で文字を適当にドラッグして選択しておきます、そのまま、左にあるボタンをクリックすると選択した文字列を取得できるという仕組みです。 これを右フレームの内容をサンプルではなく、一般的なwikipediaとかにすると、文字列の取得が出来なくなってしまうのです。 これはプログラム上制限されているのでしょうか？それとも出来る方法はあるのでしょうか もし、お分かりになるのであるならば教えて欲しいです よろしくお願いします

  • javascriptでブラウザに表示されている文字列を取得したい

    javascriptでブラウザに表示されている文字列を取得したい 宜しくお願いします。 javascriptを使って、現在表示されているブラウザの文字列を取得する方法はありますか？ ソースから取得したり、出来そうな気がするのですが、検索しても方法が見つかりませんでした。 もしくは、ブラウザのセキュリティで出来ないのでしょうか？

  • クラス名の振られた要素の文字列取得方法

    Javascriptで特定のクラス名の付けられた要素から、タグに挟まれた文字列を取得する方法を教えてください。 ある自動生成されるページに、以下のように決まったクラス名が振られる要素があります。 これらの要素から"AAA"や"BBB"の部分を取得するにはどうすればいいでしょうか？ 教えてください。 <a href="hoge.html" class="fuga">AAA</a> <p class="piyo">BBB</p>

  • 画面から文字列を取得してその文字列の位置を知る方法

    こんばんは。 質問させてください。 画面から文字列を選択して、取得します。(これは出来ました。) その文字列がHTMLソースファイルの どの位置のものか取得する方法はありますでしょうか？ ○番目の「こんばんは」を画面から取得した時に 同じ文字列があっても、○番目の位置が取得出来る方法なのですが・・・ ---- <HTML><HEAD></HEAD> <BODY> おはよう、こんばんは。 さようなら、ありがとう。 しつれいしました、おはよう、こんばんは。 こんばんは、さようなら。 さようなら </BODY> </HTML> ----

  • 文字列を取り出す方法

    こんにちわ これからPhpを勉強してるのですが、 表題のとおり、文字列から任意の部分を取り出す方法をご教授下さい。 <h1>あかさたな</h1> <p><strong>たちつてと</strong></p> <p>さしすせそ</p> 上記文字列から<strong>で囲まれている部分の文字列を取り出すには どのようにすればよいでしょうか？

    • ベストアンサー
    • PHP
  • Perlの文字列置換について

    とあるソースで $hogehoge =~ s!<文字列>! do{ $hoge =qq(hogehoge);} !egiox; $_ = $hoge; というのを見たのですが $hogehoge =~ s/<文字列>/hogehoeg/egiox;とは何が違うのでしょうか？ また修飾子gとoではどちらが評価されるのでしょうか？または二つとも評価されるのでしょうか？ 宜しくお願い致します。

    • ベストアンサー
    • Perl
  • JavaScript初心者です。URLの末尾に含まれる文字列を名前にもつclassのstyleを変更したいです。

    JavaScript初心者です。 URLの末尾に含まれる文字列を名前にもつclassのstyleを変更したいんですが。。 URLに含まれる文字列を名前にもつidのスタイル変更については解決したのですが、同様のことclassでもやりたいと考えています。 例えばURLの末尾が /index.html?AAA&BBB となっている場合、非表示だったAAAとBBBのdivを表示するということをやりたいです。 ソースは以下になります。 前半でURLの末尾を取得して、後半でclassのスタイルを書き換えているつもりです。それぞれでは動作するんですが、あわせると動作しません。自分はかなり初心者ですので、根本的な誤りがあるかもしれませんが、ご教授よろしくお願いします。 <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>test</title> <style type="text/css"> <!-- .AAA,.BBB,.CCC { width:200px; background-color:#ccc; margin:10px; display:none; } --> </style> <script language=javascript> <!-- function changeStyle(){ var query = window.location.search.substring(1); var search = query.split("&"); for (var i = 0; i < search.length; i++) { var XXX = search[i]; } var allElement = document.getElementsByTagName('*'); for (var j = 0; j < allElement.length; j++) { if (allElement[j].className=='XXX') { allElement[j].style.display = "block"; } } } --> </script> </head> <body onload=changeStyle();> <div class="AAA">111</div> <div class="AAA">222</div> <div class="AAA">333</div> <div class="BBB">444</div> <div class="BBB">555</div> <div class="CCC">666</div> <div class="CCC">777</div> </body> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する