SyntaxHighlighter を導入してからというもの、カラフルに表示されるソースコードにすっかり魅了されてしまい。過去に手抜きをしてコピペしたソースコード部分をせっせと修正しています(´・ω・`) その際、<
や &
などの特殊文字を適切にエスケープする必要があります。こういった特殊文字を変換してくれるページなどもあるんですが、コピペが非常に面倒くさい。というわけで、その場で特殊文字のエスケープを行ってくれるブックマークレットを作ってみました。変換したい部分をマウスで範囲選択し、ブックマークレットをクリックするだけのお手軽仕様です。
実のところ、テキストエリア内の選択文字列を簡単に実体参照化するブックマークレットで、既に同じ機能を持つブックマークレットが公開されています。変換動作そのものに不満はないのですが、ただ、使って見たところ、変換後にテキストエリアが無条件にトップにスクロールしてしまったり、変換した部分の選択状態が外れたり、と少し使いにくい点がありましたので、これらを改善したブックマークレットを作成しました。
javascript:(function () { // エンティティ変換用の関数 function r(s) { return s.replace (/([<>&"])/g, function (i,j) { return { '<':'<', '>':'>', '"':'"', '&':'&' }[j]; }); } var ta=document.activeElement, // 現在アクティブな要素を取得する st=ta.scrollTop, // 現在のスクロール位置を取得 ss=ta.selectionStart, // 選択領域の開始位置を取得 se=ta.selectionEnd, // 選択領域の終了位置を取得 v=ta.value, // 要素内のテキスト全部を取得 rv=r (v.slice (ss,se)); // 選択領域に含まれるテキストを r で変換する // 要素に変換済みのデータをセットする ta.value = v.slice(0, ss) + rv + v.slice(se); // 要素のスクロール位置を復元する ta.scrollTop = st; // 変換された部分に選択領域を設定する ta.setSelectionRange (ss, ss + rv.length); })();
基本的な実装はオリジナルと全く同じで、スクロール位置の復元と、変換された領域を選択状態に戻す処理を追加しました。
ちなみに、このブックマークレットを使う前の作業手順はといえば;
それが、ブックマークレットを導入することで;
という驚くべき効率化が実現しました!
先のブックマークレットを作っている際に、色々副産物ができたので公開しておきます。記事執筆には Mozilla Firefox を使っているので、Internet Exproler はおまけです。