js, html, phpを用いてtextarea内の指定範囲の文字の前後に、特定の文字を追加し出力

Question

###前提・実現したいこと
js, html, phpを使って、textarea内で範囲選択されている（ドラッグされている）文字の前後に、指定された文字を挿入し、即時表示させるサイトを製作したいです。
挿入する文字は、いくつか種類があって、buttonなどでそれを選択し、そのボタンを押すことで、対応した文字（具体的にはhtmlのタグなどです）を前後に入れる仕様です。

まだ、エンジニアとしての日が浅く、まず、どんなものから手をつければいいかすら不明なため、全体的にどのような処理をするのか、そして具体的にどのような関数などを作ればいいのかなど、教えていただけると幸いです。

###該当のソースコード

ここにご自身が実行したソースコードを書いてください

###試したこと

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

Answer 1

jQueryが利用可能であればjQuery.selectionというプラグインが期待通りの処理を行ってくれます。使い方もとても簡単です。

【参考】
jQuery.selection - テキストの選択範囲を自由自在に扱えるjQueryプラグイン

Comments

[naoki_m]

ご親切にありがとうございます。
このプラグインの存在は知っていたのですが、ここまで便利にできたとは驚きです！
大変参考になりました。ありがとうございます！！

Answer 2

簡単なサンプルだけ

$(function(){
  $('.tag').on('click',function(e){
    var v= $('#hoge').val();
    var selin = $('#hoge').prop('selectionStart');
    var selout = $('#hoge').prop('selectionEnd');
    var befStr="<"+$(this).val()+">";
    var aftStr="</"+$(this).val()+">";
    var v1=v.substr(0,selin);
    var v2=v.substr(selin,selout-selin);
    var v3=v.substr(selout);
    $('#hoge')
      .val(v1+befStr+v2+aftStr+v3)
      .prop({
        "selectionStart":selin+befStr.length,
        "selectionEnd":selin+befStr.length+v2.length
        })
      .trigger("focus");
  });
});

<textarea type="text" id="hoge" rows=10>
aaabbb
cccddd
eeefff
</textarea><br>
<input type="button" value="h1" class="tag">
<input type="button" value="h2" class="tag">
<input type="button" value="h3" class="tag">

Comments

[naoki_m]

コードまでいただけて、大変ありがたいです！！
自分が求めていたままのものだったので、とても参考になりました！
ありがとうございます！