mithmarc回答ポイント 1000ptウォッチ

jQueryブックマークレットを用いて… Add Star

以下のようなHTML
<a href="url">hoge</a>
があるページ内に複数あったとき、
目的として「urlとhogeの値をパースし結果をブラウザ上で一覧表示」する方法について質問です。
添付のファイルはネットを参考に任意のタグの値を抽出し、結果をブラウザ上に一覧表示するブックマークレットとなります。
下記のスクリプトをブックマークレットとして保存して実行すると任意のタグ属性を指定するpromptが表示されますが、今回は目的のタグが上記のように定まっているのでpromptの表示は不要ですが、ソースをどのように修正すれば意図する内容が得られるかご教示頂けますでしょうか。
よろしくお願いいたします。

[Bookmarklet]
ExtendedURL=javascript: (function () { var d = document; var s = d.createElement('script'); s.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'; d.body.appendChild(s)})();jQuery(function () { var out = ''; var prt = prompt('Please enter the TAG type for parse.', 'dt'); var user = prt.toLowerCase(); jQuery(user, this).each(function () { out += $(this).text() + '\n'; }); document.write('<textarea cols=\'100\' rows=\'100\' selected=\'selected\'>' + out + '</textarea>'); $('textarea').select();});

• はてなアカウントでログイン
• 無料ユーザー登録

みんなの回答

• mithmarc

  2014/05/29 01:11:58

  urlとhogeの間はタブ送り（それが不可であればスペース）で間隔を空け、1行ずつ表示したいと考えております。

lang_and_engine2014/05/29 01:35:22

満足500pt

これでどうでしょうか


javascript: (function () { var d = document; var s = d.createElement('script'); s.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'; d.body.appendChild(s)})();jQuery(function () { var out = ''; jQuery("a", this).each(function () { out += $(this).attr("href") + "\t" + $(this).text() + '\n'; }); document.write('<textarea cols=\'100\' rows=\'100\' selected=\'selected\'>' + out + '</textarea>'); $('textarea').select();});

スター

a-kuma32014/05/29 02:15:28

満足500pt

こんな感じで、あってますか？

javascript: (function () { var d = document; var s = d.createElement('script'); s.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'; d.body.appendChild(s); $(function () { var out = ''; ("A").each(function() { var url = $(this).attr("href"); var txt = $(this).text(); out += url + "\t" + txt + "\n"; }); var ta = d.createElement('textarea'); ta.cols = 100; ta.rows = 100; ta.innerHTML = out; d.body.appendChild(ta); ta.select(); }); })();

• Google がホストしてくれてる jQuery を、最新の 1.11.1 にしました
• Firefox で試してみたら、非同期の document.write が怒られたので、DOM で要素を追加するようにしました





Bookmarklet を作るとき、インデントが無いと間違いやすいので、外部スクリプトファイルに書くとデバッグやメンテが楽チンです。
外部スクリプトは、ローカルに Apache を立てておくか、Github なんかを使う。

例えば、この回答のだと、以下のようなスクリプトを http://localhost/hoge.js でアクセスできるところに置いておきます。

(function () {
    var d = document;
    var s = d.createElement('script');
    s.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js';
    d.body.appendChild(s);
    $(function () {
        var out = '';
        $("A").each(function() {
            var url = $(this).attr("href");
            var txt = $(this).text();
            out += url + "\t" + txt + "\n";
        });
        var ta = d.createElement('textarea');
        ta.cols = 100;
        ta.rows = 100;
        ta.innerHTML = out;
        d.body.appendChild(ta);
        ta.select();
    });
})();

で、Bookmarklet はこんな感じ。

javascript:(function(src){var s=document.createElement('script');s.setAttribute('type','text/javascript');s.setAttribute('charset','UTF-8');s.setAttribute('src',src);document.body.appendChild(s);})('http://localhost/hoge.js');

最後の方にある URL を書き換えるだけです。


はてなには、Hatena::Let というサービスもあります。
先に書いたようなことを、まるっとWebサービスとして提供してくれています。





---

追記です。
jQuery を使う必要ないんじゃね？　と思ったので、素の DOM だけで書いたのがこちらです。

javascript: (function () { var d = document; var lnks = document.getElementsByTagName("A"); var out = ''; for (var i = 0 ; i < lnks.length ; ++i) { var url = lnks[i].href; var txt = lnks[i].innerHTML; out += url + "\t" + txt + "\n"; } var ta = d.createElement('textarea'); ta.cols = 100; ta.rows = 100; ta.innerHTML = out; d.body.appendChild(ta); ta.select(); })();

スター

• 

  1件のコメントを見る

• 7cc 2014/06/01 00:59:45

  innerHTMLは特殊文字がエスケープされてしまうので、textContent推奨です。

  スター
• その他の回答を読む

この質問へのコメント

• 7cc2014/06/01 00:58:40
  >urlとhogeの間はタブ送り（それが不可であればスペース）で間隔を空け、1行ずつ表示
  
  a要素のテキストに改行がある場合も1行ずつ表示する、ということでしょうか?
  今ある回答だと1行ずつではなく、改行されてしまいます。
  
  例：こういうhtmlの時に、
  
  <a href="url">内容
  改行</a>
  
  # 1行ずつ
  url 内容 改行
  
  # 改行残す
  url 内容
  改行

質問の情報

登録日時

2014-05-29 01:09:56

終了日時

2014-06-05 01:10:04

回答条件

1人5回まで

この質問のカテゴリ

• コンピュータ
• ウェブ制作

この質問に含まれるキーワード

人気の質問

• 協議離婚した元夫が元専業主婦であった妻に対し慰謝料として毎月の生活費を振り込んでいるケースで、元妻が…匿名質問者111日前
• ソウルに行くときにWOWPASSを作ろうと思うのですが、空港セットを買うか迷っています。SIMカードが必要ない…匿名質問者11日前
• 水泳の授業が１０月まである学校ありますか？kuth621日前
• PHPでのクレジット決済について質問です。 自分のサイトのデータベースに顧客のクレジットカードの情報が入…aiomock2日前
• 本のタイトルを探しています。 2004-2006年ごろに読んだ本のタイトルを探しています。 下記は確かなことと…匿名質問者22時間前

メニュー

• 質問一覧
• カテゴリ一覧
• 無料ユーザー登録
• 人力検索はてなトップ

PC版

• お問い合わせ
• ヘルプ
• お知らせ
• はてなトップ