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();});

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2014/06/05 01:10:04
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。
id:mithmarc

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

回答2件)

id:language_and_engineering No.1

回答回数170ベストアンサー獲得回数63

ポイント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();});

id:a-kuma3 No.2

回答回数4973ベストアンサー獲得回数2154

ポイント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(); })();

id:u_7cc

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

2014/06/01 00:59:45
  • id:u_7cc
    >urlとhogeの間はタブ送り(それが不可であればスペース)で間隔を空け、1行ずつ表示

    a要素のテキストに改行がある場合も1行ずつ表示する、ということでしょうか?
    今ある回答だと1行ずつではなく、改行されてしまいます。

    例:こういうhtmlの時に、

    <a href="url">内容
    改行</a>

    # 1行ずつ
    url 内容 改行

    # 改行残す
    url 内容
    改行

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません