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

昨日書いた記事のブックマークレットでは 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);}}}})();

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

続きを読む

Seesaa で投稿する時 HTML を実体参照化するブックマークレット

JavaScript などのプログラムのコードをブログに貼り付ける際につい忘れたり、面倒なのが、'<'、'>'、'&'、'"' などを実体参照化すること。

今まではこちらの Text -> HTML Entities Encoder などを使って変換してから Seesaa の投稿画面に貼り付けていました。便利に使わせていただいていたのですが、ブラウザ一つで出来るとはいえ、タブを切り替えたりして、投稿画面から離れるのも面倒になってきたので、その場（Seesaa の投稿画面）で変換出来るようにしてみました。

方法としてはブックマークレットを利用します。本文の入力画面内の変換したい文字を選択して登録しておいたブックマークレットを実行すると変換されるという感じです。

ソースはこんな感じです。

javascript:(function(){var d=document;function enc(id){var ta=d.getElementById(id);if(ta){v=ta.value;var t;if (d.selection){t=d.selection.createRange().text;if(t)d.selection.createRange().text=r(t);}else{var S=ta.selectionStart;var E=ta.selectionEnd;t=v.slice(S,E);if(t)ta.value=v.slice(0,S)+r(t)+v.slice(E);}}function r(s){return s.replace(/([<>&\"])/g, function(m0,m1){return {'<':'&lt;','>':'&gt;','\"':'&quot;','&':'&amp;'}[m1];});}}enc('article__body');enc('article__body_more')})();

まだおかしくなったりもあるかも知れないので、もし利用される方がいたら（これだけの説明だとよくわからないかと思いますが）お気をつけ下さい。自己責任でお願いします。

追記
Seesaa に限らず使えるようにしたブックマークレットを書いてみました。
テキストエリア内の選択部分を簡単に実体参照化するブックマークレット

英文を文ごとに分ける JavaScript

複数の文からなっている英文を一文ごとに分けて、配列にする JavaScript を書いてみた。すでに、ありそうだけど取り合えず。

文末を判定する正規表現はGNU Emacs Lispリファレンスマニュアル: 探索と一致を参考にさせてもらいました。参考というかそのままな感じですが

function sentenceSeparate(str) {
  var result = [];
  // "||"をエスケープ
  str = str.replace(/\|\|/g, "\\\|\\\|");
  str = str.replace(/([\.\?!][\]\"\'\)\}]*)($| $|\s|\s\s*)/g, "$1$2\|\|");
  var lines = str.split(/\|\|/);
  // エスケープしたのを戻す
  for (var i = 0; i < lines.length; i++) {
    if (lines[i]) result.push(lines[i].replace(/\\\|\\\|/g, "\|\|"));
  }
  return result;
}

まだあまり試していないのでおかしい場合もあるかも知れないです。

追記（2006-03-01）

良く考えたらエスケープとか必要なく、単純に英語で使用されない文字で区切るようにすればいいのではないかと思ったので書き直してみました。

function sentenceSeparate(str) {
  var result = [];
  str = str.replace(/([\.\?!][\]\"\'\)\}]*)($| $|\s|\s\s*)/g, "$1$2｜");
  str = str.replace(/^｜|｜$/g, "");
  result = str.split(/｜/);
  return result;
}

画像なしで角丸の吹き出しを表示する JavaScript

吹き出しを表示できる JavaScript を書いたりしたのだけど、画像を使って吹き出しを作っているのでちょっと面倒な気がしてきた。
画像を使用した吹き出しその1、その2。

そこで、画像を使わないで吹き出しを作れるようにしてみた。吹き出しのデザインは角丸の下に矢印（？）を付けるという感じ。まずはサンプルを。

続きを読む

吹き出しを貼り付けられる JavaScript を改良してみた

前に好きな場所に吹き出しを表示できる JavaScript というのを書いた。でも、あまり使いやすい感じではなかったので、少し改良してみた。

改良というか、似たようなものをまた書き直してみた感じです。かえっておかしなところも多い気もします。吹き出しが消せなくなっていたりとか。

前のは表示する位置を X値、Y値で指定していましたが、今度のは表示させたいエレメントでできるようにしてみました。その代わり、表示する位置の指定はそのエレメントの左上、真ん中上、右上だけになりました。

画像に id をつけておけば比較的簡単にその上に吹き出しを貼り付けることができると思います。

Sample

var elm = document.getElementById("sampleImage");
var balloon = new SpeechBalloon(elm);
balloon.paste("こんにちは", "left");

実際の吹き出しはこんな感じになります。文章を入れて、貼付けを押すと下の写真の上に吹き出しが出ます。

続きを読む