2007年02月14日

テキストエリア内の選択文字列を簡単に実体参照化するブックマークレット

昨日書いた記事のブックマークレットでは Seesaa の投稿画面でしか使えなかった(IE は大丈夫だったかも)が、良く考えたらテキストエリアのあるページならどこでも使えるように書けるのではないかと思ってきたので、書き直してみた。

これならどのページでもテキストエリア内のテキストをマウスなどで選択してブックマークレットを実行すれば、'<'、'>'、'&'、'"' を '&lt;'、'&gt;'、'&amp;'、'&quot;' に変更することが出来ます(多分)。

ソースコードは下記です。コピーしてお気に入りなどに登録してご利用ください(追記:下のリンクを登録で大丈夫です)。ただし、おかしな点があるかも知れないので、自己責任でお願いします。

追記
IE の場合はテキストエリアに限らず選択範囲は置き換えられてしまいます。普通に使う分にはそれほど問題もないかとも思いますが。

更に追記
下のリンクをお気に入りに登録すれば使えるようになります。

javascript:(function(){var d=document;function r(s){return s.replace(/([<>&\"])/g,function(m0,m1){return {'<':'&lt;','>':'&gt;','\"':'&quot;','&':'&amp;'}[m1];});}if(d.selection){d.selection.createRange().text=r(d.selection.createRange().text);}else{var ta=d.getElementsByTagName('textarea');for(var i=0;i<ta.length;i++){if(ta[i].value){var s=ta[i].selectionStart;var e=ta[i].selectionEnd;var v=ta[i].value;var t=v.slice(s,e);if(t)ta[i].value=v.slice(0,s)+r(t)+v.slice(e);}}}})();

ブックマークレットは後で自分でも何をしていたかわからなくなる場合が多いので、改行、スペースなどを入れて見やすくして、コメントを入れたソースコードも貼っておこうかと思います。

javascript:(
  function(){
    var d = document; // 文字数節約
    // 文字を実体参照化する関数
    function r(s){
    return s.replace(/([<>&\"])/g, function(m0,m1) {
    return {'<': '&lt;', '>': '&gt;', '\"': '&quot;', '&': '&amp;'}[m1];
    });
    }
    // IE で選択範囲を取得する場合
    if (d.selection) { 
      d.selection.createRange().text = r(d.selection.createRange().text);
    } else {
      // Firefox, Opera の場合
      var ta = d.getElementsByTagName('textarea'); // ページ内の textarea を取得
      for (var i = 0; i < ta.length; i++) {
        // textarea に入力があれば
        if (ta[i].value) {
          var s = ta[i].selectionStart; // textarea 内での選択開始位置
          var e = ta[i].selectionEnd; // textarea 内での選択終了位置
          var v = ta[i].value; // textarea 内の内容を変数に
          var t = v.slice(s, e); // 選択範囲を textarea の内容から抜き出す
          // 選択範囲を実体参照化して textarea に戻す
          if (t) ta[i].value = v.slice(0, s) + r(t) + v.slice(e);
        }
      }
    }
  })();

やはり改行などを入れると自分でも分かりやすくなったような気もしたけど、ブログだとまた読みにくいかも。

posted by knit at 21:53 | Comment(0) | TrackBack(5) | JavaScript
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのトラックバック

ブログに記事を書くとき 特定文字を実体参照にする
Excerpt: こんにちわ。なおとです。 このブログ(D3ブログモジュール)に記事を書くときは、基本的にhtmlを直接書く機能を使って書いています。 そのため、phpやjavascriptのコードを掲載すると..
Weblog: XOOPS専門-株式会社RYUS - d3blog
Tracked: 2009-05-15 13:24

[MovableType]EntityRefButtonプラグインが動かない場合の対処法
Excerpt: MovableTypeでHTML実体参照に変換してくれるプラグイン「EntityRefButton」がMT5.2で動きませんでした。 「Perlは多少書けるし、いっちょう直してやるか!」と直す気まんま..
Weblog: DQNEO起業日記
Tracked: 2011-07-01 06:49

[MovableType]管理画面の記事作成画面のツールバーに実体参照化ボタンを追加する方法
Excerpt: 前回の記事 [MovableType]管理画面の記事編集ツールバーでオリジナルボタンを追加する方法 の応用編です。 昔あったプラグイン「EntityRefButton」(私は使ったことないですが)とほ..
Weblog: DQNEO起業日記
Tracked: 2011-07-23 20:50

ソースコードの貼付け、実体参照
Excerpt: 今更ですが、ソースコード貼付けについてです。 毎回行き詰まる度に、いろいろな方のBlogのMTタグ、CSS、JSなんかを参考にさせていただいています。 そこで、自分のBlog内にも備忘録的に、ソースコ..
Weblog: BUSTeR-WORKz.com
Tracked: 2011-08-06 00:17

テキストエリア内の特殊文字を実体参照に変換するブックマークレット
Excerpt:  SyntaxHighlighter を導入してからというもの、カラフルに表示されるソースコードにすっかり魅了されてしまい。過去に手抜きをしてコピペしたソースコード部分をせっせと修正しています(´・..
Weblog: Open MagicVox.net
Tracked: 2011-12-03 19:40
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。