取得した情報を一つのテキストにまとめたい

Question

別ドメインのソースから、必要な情報だけ取得したいと思っています。
http://sterfield.co.jp/demo/hoshino/55/
こちらのサイトを元に取得情報を個別に返すのではなく、
テキストエリアにまとめて出力する方法を思案しています。

試してみたいくつかの方法をまとめておきます。
単純に足してみました。

 $( "#text" ).val( r.find( "title" ).html() + r.find( "meta[name='description']" ).attr( "content" ) );

値を別に用意して以下のようにまとめました。

  var b = "";
  b += "r.find( 'title' ).html()";
  b += "r.find( 'meta[name='description']' ).attr( 'content' )";
  $( "#text" ).html(b);

もう一つ試しました。

      var tit = $( "#title" ).val( r.find( "title" ).html() );
var des = $( "#description" ).val( r.find( "meta[name='description']" ).attr( "content" ) );
var b += tit + des;

何れも情報の取得自体が失敗でした。
ご教授いただきたいです。

Answer 1

取得した情報を連想配列や配列に格納（この時点でほぼ1つにまとまっています）。
その後必要な加工をして、テキストエリアに出力すればいいと思います。

紹介しているサイトの場合、取得した情報を各インプットタグのvalue上に入れているからそうなっているだけで、どう出力するかは書き方次第でどのようにでもできます。

取得

サンプルコードの取得の部分はこの箇所です。
ここはそのまま使えます。

r.find( "title" ).html();

出力

出力はこの部分です。
ここを変えます。

$( "#title" ).val(value);

上記取得と出力を同時に行っているのが下記のコードの構造、ということです。

$( "#title" ).val( r.find( "title" ).html() );

アプローチ

サンプルコードでは、取得と出力を同時に行っています。
まず、取得したものを変数に代入しましょう。

//　出力先の用意
var $textarea = $('textarea');

// 取得したものを変数に代入
var title = r.find( "title" ).html();
var description = r.find( "meta[name='description']" ).attr( "content" );

// 出力用テキストに加工
var output = title + descriptrion;

// 出力
$textarea.text(output);

/* 別パターン */
// 取得したものを配列にする
var ary = [title, description];

// 配列結合
var output = ary.join(" ");

// 出力
$textarea.text(output);

Comments

[garaji]

本当に初歩的な問題で申し訳ございません。
ご指摘のとおり、どう出力するかの具体的方法が自分の知識ではうまくいかず困っています。

[yamato_hikawa]

回答に追記しました。分からないことがあればご質問ください。よろしくお願いします。

[garaji]

配列結合処理まで行うと、ようやくできました。
解説まで頂き、ありがとうございます。
勉強になりました。

Answer 2

http://sterfield.co.jp/demo/hoshino/55/

こちらのサイトが最もイメージと近い

この参考サイトのソースを読んでみましたか？

// title
$( "#title" ).val( r.find( "title" ).html() );

例えばこの部分

r.find( "title" ).html() で取り出した内容を $( "#title" ).val(内容); で指定の input に表示しています。

• 取り出したい内容は同じ
  → 違ったとしても、参考サイトと同様の取り出し方で増やせる
• 出力先は違う
  → けど、やはり出力先の指定の仕方も既に参考サイトに書いてある

やりたいことからすると… あとは好きな表示形式に加工して出力すれば完了ですかね？

---

参考サイトのソースは読んでみましたか？
ローカルにコピペ(または写経) して動かしてみましたか？
望んだ挙動になるように、改造してみましたか？
どこまで試し、どこがどう分からなかったでしょうか？

シンプルだったので先に回答を書いてしまったのですが…
分からないなりにコードを読むとか真似をしてみるとか改造してみるとか大切です。
そしてただ「分からない」ではなく、「ここまでできたが、こういう理由でここが分からない」というのも大事です。
私の↑の説明もだいぶ端折っているので、まずは試してみてください。

Comments

[garaji]

ありがとうございます。
思考例をまとめておきます。