フィロの村note

ブログのサービスとかのWebエディタではマウスで選択した範囲の文字の周りをHTMLタグで囲ったりするのは良く見かけると思う。
私は今までこの処理をどうやっているのか疑問でした。

自作でWebエディタを作っているので特にこの箇所は調べていましたが…
調べ方が悪かったのか結局webで見つけることはできませんでしたが…

つい先日、自己解決できました。本当なんとなくやってみたコードで偶然に。
結構簡単なものだったので正直ショックだったりします…orz

document.selection.createRange().text

上記のjavascriptのコードは選択範囲の文字列を返すものです。
…私はこれを読み込むときだけ使うものと思っていました。
実際は「上書き」ができます。

document.selection.createRange().text=
 		"「" +document.selection.createRange().text+"」";

まぁ簡単に書きましたが、上記のコードで選択範囲の前後に「」を表示させます。
もちろん+=を使って語尾に文字を追加する事もできます。

ただし注意点として、このコードはIE系のブラウザでしか動かないようです。
IE系以外のブラウザでこのような処理をする場合には別の処理方法があるらしいですが…
私はそこまで辿り着いていないのでここで終了…！