外部HTMLの一部文字を現在のページに表示させたい

Question

page1にtextaeraに、page2の一部の文字を表示させたいと思っています。

page1 (textaeraはreadonly)

<!-- ほかは省略 -->
<textarea class="comment" name="comment2" readonly placeholder="ここで最新のコメントを表示する"></textarea>

page2

<!-- 上は複数の階層がある -->
<div class="cf">
  <div class="cf_151 attribute">
    <div class="label">...</div>
    <div class="value"> aaa </div></div>
  <div class="cf_162 attribute">
    <div class="label">...</div>
    <div class="value"> 表示したい文字1 </div></div>
  <div class="cf_173 attribute">
    <div class="label">...</div>
    <div class="value"> 表示したい文字2 </div></div>
  <div class="cf_184 attribute">
    <div class="label">...</div>
    <div class="value"> 表示したい文字3 </div></div>
  <div class="cf_195 attribute">
    <div class="label">...</div>
    <div class="value"> bbb </div></div>
</div>

page2の"表示したい文字3"をpage1のtextareaに表示させる

$(function () {
        $('textarea[name="comment2"]').load('page2 .cf_184 .value');
        console.log($('textarea[name="comment2"]').val());
    });

結果は、textareaに文字が表示されていません。もちろん、consoleでも何も表示されません。
.cf_184は唯一なclass名のため、指定しました。
.cf_184 .value のところが間違っていると思いますが、どうやって書くべきですか？

1. ネットでいろいろ調べました。

セキュリティの問題で、ドメインが違う場合は読み込みできないということがわかりました。
私の場合は、ドメインが同じですが、置く場所は違います。影響がないと思っています。
page1: server/stats/Cl22/...
page2: server/redmine/issues/123

1. 下記やり方も検討しますが、loadを優先的に考えます。

• ajax
  ajaxについても調べました。「loadの中はajaxが動いているので、同じです」ということが見えました。
• page1のtextareaが外部txtを読み込んで、内容を表示させる(やってみましたが、うまくできませんでした)
• page1のtextareaを編集可能に変更し、「保存ボタン」を押すと、texaareaの内容をtxtファイルに出力する

ほかのいい方法があるなら、教えていただければ幸いです。

Answer 1

yambejpさんのおかげて、解決しました。コードを記載します。

    $(function(){
      $.ajax({
        url:"page2",
      }).done(function(data){
        var txt=$(data).find('.cf_184 .value').text();
        $('textarea[name="comment2"]').val(txt);
        console.log(txt);
      });
    });

Answer 2

yambejpさんのおかげて、解決しました。コードを記載します。

    $(function(){
      $.ajax({
        url:"page2",
      }).done(function(data){
        var txt=$(data).find('.cf_184 .value').text();
        $('textarea[name="comment2"]').val(txt);
        console.log(txt);
      });
    });

Answer 3

• page1.html

$(function(){
  $.ajax({
  url:"page2.html",
  }).done(function(data){
    var txt=$(data).find('.value').text();
    console.log(txt);
  });
});

• page2.html

<div class="cf_524 attribute">
  <div class="label">...</div>
  <div class="value"> 表示したい文字 </div></div>

最後の.valueのtextを拾う

• page1.html

$(function(){
  $.ajax({
  url:"page2.html",
  }).done(function(data){
    var txt=$(data).find('.value:last').text();
    console.log(txt);
  });
});

• page2.html

<div class="cf">
  <div class="cf_151 attribute">
    <div class="label">...</div>
    <div class="value">aaa</div></div>
  <div class="cf_162 attribute">
    <div class="label">...</div>
    <div class="value">bbb</div></div>
  <div class="cf_173 attribute">
    <div class="label">...</div>
    <div class="value">ccc</div></div>
  <div class="cf_184 attribute">
    <div class="label">...</div>
    <div class="value"> 表示したい文字 </div></div>
</div>

.valueのtextを全部取得してtextareaに

<script>
$(function(){
  $.ajax({
  url:"page2.html",
  }).done(function(data){
    var txt=$(data).find('.value').map(function(){return $(this).text()}).get().join("\n");
    $('textarea').val(txt)
  });
});
</script>
<textarea></textarea>

Comments

[NightElf00]

page2.htmlに複数の <div class="value"> </div> がある場合は、どうすればいいですか？

[yambejp]

複数あった場合にどれを取得するのですか？
具体的なpage2.htmlを例示して、取得したい場所を提示ください

[NightElf00]

page2のhtml文を修正しました。お願いします。

[yambejp]

端的にいうと最後のvalueでよいですね？

[NightElf00]

いいえ、ほかの場所の文字も取得必要です。page2のhtml文を再度修正しました。何度も修正ですみません。
お願いします。

[yambejp]

全部取得するバージョン追記しておきました

[NightElf00]

説明が悪くてすみません。例えば、"表示したい文字3"　を取得したい場合、どうすればよいですか？

[NightElf00]

教えていただいた ajax で解決しました。ありがとうございました！