jqueryを使ってテキストエリア内の文字をタグで囲む

プログラミング

2019.09.022023.03.12

今回はjqueryを使ってテキストエリア内の文字をタグで囲む方法を紹介していきたいと思います。
実はこのコードは紹介していただいたものなんですが、いまだにwpを使わずに何かを作っている人にとってもう少し評価されてもよさそうな気もしたので再度載せておきますｗ

今回の記事で何ができるようになるかというと

冒頭の画像のように

アオリイカはおいしいよ

という文章の水色のマーカーの部分のようにカーソルで選択するとその部分を[大][/大]タグで囲むという

アオリイ[大]カはお[/大]いしいよ

ようなことができるようになります。選択しなくてもカーソルを持っていくだけでタグを挿入できる便利な機能をテキストエリアに付けるというwpユーザーにとっては当たり前の機能なんですｗ

サンプルコードでは[大]のようなタグではなく普通のh1h2h3タグが挿入されるようになっています。

このまま使う場合アップロードする際はhtmlは自由でいいですが、jsは「test.js」でアップロードしてください

HTML

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="test.js"></script>
<title>test_3:textareaの文字をタグで囲む</title>
</head>
<body>
<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">
</body>
</html>

Javascript

$(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");
  });
});