特定部分のテキストを取得する方法
- あるテンプレートに添って作られたページから特定のテキストを取得するブックマークレットを作成したいです。
- りんご、みかん、ぶどうのテキストを抜き出すための方法を教えてください。
- 上記のような構造のページから特定のテキストを取得する方法を教えてください。
- ベストアンサー
特定部分のテキストを取得したい
あるテンプレートに添って作られたページからテキストを取得するブックマークレットを作りたいのですが、 下記のような構造のページから りんご、みかん、ぶどう、部分のテキストだけ抜き出して取得するにはどうすればいいでしょうか？ <h1 id="hoge">りんご</h1> ～ <span class="fuga"> <a href="test.html">みかん</a> </span> ～ <div class="piyo"> <dl class="foo"> <dt>xxx</dt><dd>ぶどう</dd> <dt>xxx</dt><dd>xxx</dd> <dt>xxx</dt><dd>xxx</dd> </dl> </div>
- sugarugaru
- お礼率100% (1/1)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
alert (document.querySelector ('#hoge').firstChild.nodeValue); alert (document.querySelector ('span.fuga > a').firstChild.nodeValue); alert (document.querySelector ('div.piyo dd').firstChild.nodeValue); もちろん</body>の手前のスクリプトのなかで。
関連するQ&A
- VBAでIEに表示されている情報を取得したい。
お世話になります。 VBAから起動したIEに記載されている情報をコピーしてエクセルに張りたいと 思っております。 下記で言いますと「08:04出発」という文字を取得したいのですが どのようにしたら取得できるのでしょうか？ お手数ですがよろしくお願い致します。 ※当方、TextBoxに値を入れる・OKボタンを押す方法はわかったのですが、 表示されたページから値を取る方法がわからないのです。。。 <div class="infomation"> <dl><dt><span class="route-departure">08:04出発</span><span class="route-arrive-on">09:08到着</span>時間：</dt><dd>1時間4分（乗車53分、ほか11分）</dd></dl> <!--heikin-->
- ベストアンサー
- Visual Basic
- HTMLのデータ読み取り
HTMLのデータ読み取り 下記のように記述されたホームページの一部からデータを読み取りしたいのですが いろいろ参考にしてプログラムしても構文エラーで実行できません。 WEBBROUSERを使用してHTML.DOCUMENTを取得するところまではできました。 すみませんが詳しい方教えていただけますでしょうか？ VB2010を使用し、document.completeイベントにて取得しようとしています。 －－－－－－－－－－－－－－－－－－－－－ <dl class="clearfix" style="padding:10px 0 0;"> <dt>現在位置 :</dt> <dd class="address"> <span class="address-now">+38</span><br /><span class="vat">（mm）</span> </dd> <dt>目標 :</dt> <dd class="target"><span class="user-target">読み込み中</span></dd> </dl> －－－－－－－－－－－－－－－－－－－－－ ほしい出力 text1.text = address text2.text = +38 text3.text = target text4.text = 読み込み中 ← この値は変化しています よろしくお願いします。
- 締切済み
- Visual Basic
- dlタグの中にdivは使える？
dlタグの中で、dtタグとddタグを一つのdivで囲ってもよいのでしょうか？？ 以下のようなかたちなのですが・・・。 使い方として間違っているのでしょうか？？ ↓ ------------------------------------------------ <dl> <div class="aaa"> <dt>タイトル01</dt> <dd> <h4>説明文説明文説明文説明文説明文説明文</h4> <p><img ・・・・・></p> </dd> </div> <div class="aaa"> <dt>タイトル02</dt> <dd> <h4>説明文説明文説明文説明文説明文説明文</h4> <p><img ・・・・・></p> </dd> </div> <div class="aaa"> <dt>タイトル03</dt> <dd> <h4>説明文説明文説明文説明文説明文説明文</h4> <p><img ・・・・・></p> </dd> </div> </dl> ------------------------------------------------ dlタグの中には直接dtタグとddタグしか入れることができないということのようですが、 これはdivは入れられないということになるのでしょうか？？ （dtはインライン要素のみ、ddはブロック要素もインライン要素も使えるということなので、 ddの中ではdivが使えると思うのですが・・・。） また、もしdivで囲えないとしたら、 今回の場合は、それぞれを一つのdlで囲ってしまうべきなのでしょうか？？ ご存知の方いらっしゃいましたら、よろしくご指導ください。お願いします。
- ベストアンサー
- CSS
- inlineでテキストの入ったボックスを横に並べる
いつもお世話になっています。 inlineでテキストが中に入った高さの違うボックスを横に並べる方法に ついてです。float1～6が題名で、あいうえお等がその下に説明文として 並ぶと思ってください。 確認ブラウザ 【OK】Win ie6、ie7、Fx3.5.2、Opera、Mac Safari 【NG】Mac Fx2.0 添付画像のように<dt>と<dd>が横に並んでしまい、<dt>の下に来てくれ ません。<dt><dd>どちらをclearしてもだめでした…。 宜しくお願いします！！ <style> div.wrap { width: 600px; background: #EEEEEE; padding: 8px; border: 1px solid #333333; } div.box { display: -moz-inline-box; display: inline-block; /display: inline; /zoom: 1; width: 160px; height: 130px; margin: 8px; border: 2px solid #333333; background: #DDDDDD; vertical-align: top; padding: 8px; } div.height { height: 200px; border: 2px solid #FF9999; background: #FFEEEE; } dd{ width: 150px; float: left; } dt { float: left; clear: left; } </style> <html> <body> <div class="wrap"> <div class="box"> <dt>float 1</dt> <dd>ああああああああああああああああああああああああああああああああああああ</dd> </div><!-- --><div class="box height"> <dt>float 2</dt> <dd>いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</dd></div><!-- --><div class="box"> <dt>float 3</dt> <dd>うううううううううううううううううううううううううううううううううううう</dd> </div><!-- --><div class="box"> <dt>float 4</dt> <dd>ええええええええええええええええええええええええええええええええええええ</dd></div><!-- --><div class="box"> <dt>float 5</dt> <dd>おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお</dd> </div><!-- --><div class="box"> <dt>float 6</dt> <dd>かかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかか</dd></div> </div> </body> </html>
- ベストアンサー
- HTML
- JavaScriptでオブジェクトを取得したい
JavaScriptで特定の<dl>内の<dd>要素（複数）を取得したいと 思っています。<dd>要素の数はページにより変動しますので 不定です。 <dl id="myDL"> <dt>xxx</dt> <dd>@@@</dd> <dd>aaa</dd> </dl> どのようにすればよいでしょうか？
- ベストアンサー
- JavaScript
- phpで文字列に入ったhtmlタグの中身を取得
phpで次の文字列の中身を自分の思ったように取得したいです。 -----$textの中身 <div class="hoge">ほげほげ1<div class="piyo">ぴよぴよ</div>ほげほげ2</div> -----自分の実行したphpコード preg_match_all("/<div class=\"hoge\">(.*?)<\/div>/s", $text, $textArr); -----結果($textArr[0]) ほげほげ1<div class="piyo">ぴよぴよ -----自分の望む結果($textArr[0]) ほげほげ1<div class="piyo">ぴよぴよ</div>ほげほげ2 ---------------------------------- divタグの中にdivタグが入っている時、 最初の/divに反応してしまいます。ちゃんと、ほげほげ2まで取得する方法を教えてください。
- 締切済み
- PHP
- DD,DT,DDを横並び。paddingとmarginと無指定で
DD,DT,DDを横並び。paddingとmarginと無指定で 下記の内どれが一番使われているのでしょうか？ 理由も教えていただけれるとありがたいです。 dl,dt,dd{ margin:0; padding:0;} dt{ float:left; width:8em; } .list0 dd{ padding-left:7em;} .list2 dd{ margin-left:8em;} <div> <dl class="list0"> <dt>短いタイトル</dt> <dd>短い説明、短い説明、短い説明</dd> <dt>短いタイトル</dt> <dd>短い説明、短い説明、短い説明</dd> </dl> <br /> <dl class="list1"> <dt>短いタイトル</dt> <dd>短い説明、短い説明、短い説明</dd> <dt>短いタイトル</dt> <dd>短い説明、短い説明、短い説明</dd> </dl> <br /> <div class="list2"> <dl> <dt>短いタイトル</dt> <dd>短い説明、短い説明、短い説明</dd> </dl> <dl> <dt>短いタイトル</dt> <dd>短い説明、短い説明、短い説明</dd> </dl> </div> </div>
- ベストアンサー
- HTML
- PHP テキストファイルの一部分を部分一致で
PHP初心者です。 ホームページ作成で、共通メニューをテキストファイルで作り、require_once で呼び出しているのですが、同じテキストファイルの一部分を、文字列から検索して引っ張ってくるにはどうすれば良いのでしょうか？ テキストファイル <div class="menu_big">1. 東京都</div> <div class="menu"><a href="xxx.1-1.html">1-1.千代田区</a></div> <div class="menu"><a href="xxx.1-2.html">1-2.渋谷区</a></div> <div class="menu"><a href="xxx.1-3.html">1-3.新宿区</a></div> <div class="menu_big">2. 北海道</div> <div class="menu"><a href="xxx.2-1.html">2-1.札幌市</a></div> 欲しい結果 '2-1' という文字列を使って、 2-1.札幌市 という文字列と、 <a href="xxx">2-1.札幌市</a> の文字列の、ふたつが欲しいのです。 ぱんくずリストやタイトル部分での使用を考えています。 テキストファイル内を改行で調整した後にfile()で配列化→行数指定ではできたのですが、文字列の部分一致から結果が欲しいのです。array_searchやpreg_grepなど試してみたのですが、知識不足でうまくいきませんでした…。 どなたか詳しい方、よろしくお願いします。
- ベストアンサー
- PHP
- jQueryでアコーディオンメニュー
jQueryのaccordionでメニューを作っています。 初期のページは大項目1～3がアコーディオンで開閉し、 開いた中にある小項目がリンクボタンになっています。 【HTML 1】 小項目1（index_01.html）では、大項目1が開いたままになり、 大項目2、3のみアコーディオンで開閉します。【HTML 2】 ここからがご教示頂きたいところで、 小項目2（index_02.html）を表示している時は 大項目2が開いたままで、大項目1、3をアコーディオンさせたいと考えております。 【HTML 3】 アコーディオンではさむ形になるので、新しいid「slider2」を作りましたが、 お互いが開いたままの状態になってしまうのが難点です。 解決案として、「slider」で大枠を囲み、アコーディオンに左右されないddを作るか、 「slider」と「slider2」を同期させてどちらか片方が開いている時は片方が閉じるように する・・・と考えています。 ★印の部分のfor文に手を加えるのではないかと思うのですが、 どうにもお手上げです・・・ お手すきの方、どうかお力添え下さい よろしくお願い致します。 //______jQuery______// var accordion=function(){ var tm=sp=10; function slider(n){this.nm=n; this.arr=[]} slider.prototype.init=function(t,c,k){ var a,h,s,l,i; a=document.getElementById(t); this.sl=k?k:''; h=a.getElementsByTagName('dt'); s=a.getElementsByTagName('dd'); this.l=h.length; ★for(i=0;i<this.l;i++){var d=h[i]; this.arr[i]=d; d.onmouseover=new Function(this.nm+'.pro(this)'); if(c==i){d.className=this.sl}} l=s.length; for(i=0;i<l;i++){var d=s[i]; d.mh=d.offsetHeight; if(c!=i){d.style.height=0; d.style.display='none'}} } slider.prototype.pro=function(d){ for(var i=0;i<this.l;i++){ var h=this.arr[i], s=h.nextSibling; s=s.nodeType!=1?s.nextSibling:s; clearInterval(s.tm); if(h==d&&s.style.display=='none'){s.style.display=''; su(s,1); h.className=this.sl} else if(s.style.display==''){su(s,-1); h.className=''} } } function su(c,f){c.tm=setInterval(function(){sl(c,f)},tm)} function sl(c,f){ var h=c.offsetHeight, m=c.mh, d=f==1?m-h:h; c.style.height=h+(Math.ceil(d/sp)*f)+'px'; c.style.opacity=h/m; c.style.filter='alpha(opacity='+h*100/m+')'; if(f==1&&h>=m){clearInterval(c.tm)}else if(f!=1&&h==1){c.style.display='none'; clearInterval(c.tm)} } return{slider:slider} }(); //______HTML 1______// <div id="accordion"> <dl class="accordion" id="slider"> <dt>▼大項目1</dt> <dd> <span class="bank_top"><a href="index_01.html">小項目1</a></span> </dd> <dt>▼大項目2</dt> <dd> <span><a href="index_02.html">小項目2</a></span> </dd> <dt>▼大項目3</dt> <dd> <span><a href="index_03.html">小項目3</a></span> </dd> </dl> </div> //______HTML 2______// <div id="accordion"> <dl class="accordion"> <dt>▼大項目1</dt> <dd> <span class="bank_top"><a href="index_01.html">小項目1</a></span> </dd> <dl class="accordion" id="slider"> <dt>▼大項目2</dt> <dd> <span><a href="index_02.html">小項目2</a></span> </dd> <dt>▼大項目3</dt> <dd> <span><a href="index_03.html">小項目3</a></span> </dd> </dl> </div> //______HTML 3______// <div id="accordion"> <dl class="accordion" id="slider"> <dt>▼大項目1</dt> <dd> <span class="bank_top"><a href="index_01.html">小項目1</a></span> </dd> </dl> <dl class="accordion"> <dt>▼大項目2</dt> <dd> <span><a href="index_02.html">小項目2</a></span> </dd> <dl class="accordion" id="slider2"> <dt>▼大項目3</dt> <dd> <span><a href="index_03.html">小項目3</a></span> </dd> </dl> </div> <script type="text/javascript"> var slider1=new accordion.slider("slider1"); slider1.init("slider"); var slider2=new accordion.slider("slider2"); slider2.init("slider2"); </script>
- ベストアンサー
- JavaScript
- JQueryで$("dt span")クリック動作
JQueryで$("dt span")をクリックしたときに 隣接するddタグの部分を表示させるには以下の記述を どのように修正すればよいのでしょうか？ <html> <head> <style type="text/css"> dl { margin-bottom: 20px; } dd { display: none; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("dt span").click(function(){ $("+dd",this).slideToggle(); }); }); </script> </head> <body> <dl> <dt>toggle<span>開く</span></dt> <dd>テキストが入ります。</dd> </dl> <dl> <dt>toggle<span>開く</span></dt> <dd>テキストが入ります。</dd> </dl> </body> </html> ご存じの方がおられましたらご回答をよろしくお願いします。
- ベストアンサー
- JavaScript
お礼
ばっちりうまくいきました。助かります。 ありがとうございました。