【jQuery】フォーム内の選択テキストの前後に任意のテキストを挿入する

前提・実現したいこと

複数あるテキストフォーム(input type="text"、textarea)にフォーカスが当たっている状態で、テキストの一部又は全部を選択したときに、ボタンをクリックして対応するタグをテキストの前後に挿入したい。

試したこと

current = $(":focus");でカーソルが当たっている要素を取得し、window.getSelection().toString()で選択している範囲の値も取得できました。
ただここから、選択範囲の前後にタグを入れる方法がわかりません。

ボタンをクリックしたときに、currentに下のソースのようなことや、参考サイトのような.insertBeforeSelection('xxxx')を試しました。がcurrent..insertBeforeSelection is not a functionとconsoleにエラーがでています。うまくいきません。

javascript
1
2$(function(){
3  
4  .....
5  
6  var current;
7  var inputVal;
8
9  $("#contents input").focusin(function(){
10    current = $(":focus");
11    console.log(window.getSelection().toString());
12  }
13
14  $('#btn').on('click', function(){
15      current.selection('insert', {
16           text: 'test', mode: 'before'
17      }).selection('insert', {
18           text: 'test', mode: 'after'
19      });
20  });
21  
22  .....
23  
24});

HTML
1<button id="btn" type="button">button</button>
2<div id="contents">
3  
4  ...
5  // input type="text"とtextareaは複数あります。
6  // appendして追加することもあります。
7
8  <div>
9    <input type="text" value="xxxxxxxxxxxx">
10  </div>
11  <div>
12    <textarea></textarea>
13  </div>
14  
15  ...
16  
17</div>

お詳しい方、ご教示願います。

追記

参考サイト：https://weekendphp.com/jQuery/jquery.selection.html

m.ts10806

2017/05/24 00:23 編集

参考サイトはどこでしょう？エラーメッセージからするとinsertBeforeSelection()が未定義関数であるという状態なので、insertBeforeSelection()を定義すればひとまず目の前の問題は解決しそうですが。

退会済みユーザー

2017/05/24 08:29

参考サイト：https://weekendphp.com/jQuery/jquery.selection.html

退会済みユーザー

2017/05/24 08:30

jQuery.selection というプラグインのインストールが必要でした。インストールせずにしていたので、未定義関数になっておりました。

m.ts10806

2017/05/24 08:30

ここでは目に付きにくいので質問内容に貼ってください。

退会済みユーザー

2017/05/24 08:36

追記いたしました。

m.ts10806

2017/05/24 09:43

ありがとうございます。解決できたようで良かったです。

退会済みユーザー

2017/05/24 09:44

ご指摘のおかげでインストールが必要なことに気づきました。ありがとうございました。

行動規範の内容に同意します

回答2件

ベストアンサー

ちょっとやってみました

javascript
1$(function(){
2  var target;
3  $('#contents input,#contents textarea').on('focus',function(){
4    target=$(this);
5  });
6  $('#btn').on('click',function(){
7    if(target){
8      var v=target.val();
9      var start = target.get(0).selectionStart;
10      var end = target.get(0).selectionEnd;
11      var pattern="^((?:[\r\n]|.){"+start+"})((?:[\r\n]|.){"+(end-start)+"})((?:[\r\n]|.)*)$";
12      var reg=new RegExp(pattern,"gm");
13      target.val(v.replace(reg,'$1[mae]$2[ato]$3'));
14    }
15  });
16});
17