JavaScript
Redmine
textile

JavaScriptでtextareaの選択範囲の前後に文字列を挿入する

経緯

redmineでtextileで書いていて、<pre>タグ内で一部を赤文字にするなどして強調させたい時がある。毎回、</notextile>%{color: red}<notextile>赤文字</notextile>%<notextile>をコピペしていたが、流石にめんどくさくなった。巷に手ごろなサンプルソースがなかったため、自分で実装した。

ソース

var textarea = document.querySelector('textarea');
var pos_start = textarea.selectionStart;
var pos_end = textarea.selectionEnd;
var val = textarea.value;
var range = val.slice(pos_start, pos_end);
var beforeNode = val.slice(0, pos_start);
var afterNode = val.slice(pos_end);
var insertNode = " [前] " + range + " [後] ";
textarea.value = beforeNode + insertNode + afterNode;

使い方

  1. " [前] "、" [後] "を任意の値に修正
  2. ChromeでF12を押してJavaScriptコンソールを開く
  3. テキストエリアの挿入したい個所を選択
  4. 選択した状態で上記のソースをJavaScriptコンソール上にコピペ&Enterして実行
  5. ブックマークレット化など後はお好きにどうぞ

javascriptで選択範囲の前後に文字列挿入.png