ITエンジニア/デザイナ向けにオープンソースを毎日紹介

おお、これはかなり使えそう!

テキストボックスやテキストエリアに入力された文字列に対して何らかの処理を行いたいと思うことは良くあります。さらにキャレットのある場所や選択されている文字に対して処理を行うのも良くある処理ではないかと思います。

例えばWYSIWYGエディタを作ったり、選択文字を別なサービスに飛ばしたりといった使い方が考えられます。意外と選択範囲を取り出すというのは面倒な処理なのですがjQuery.selectionを使うとごくごく簡単にできそうです。

テキストボックスの場合

例えばテキストボックスの例です。

$('#sel-input').click(function(){
    alert($('#input').selection());
    $('#input').focus();
});

$('#input').selection()
で選択されている文字が取れます。

こんな感じに選択していたボタンを押します。
こんな感じに選択していたボタンを押します。

アラートが出ました。
アラートが出ました。

テキストエリア

テキストエリアでも使えます。insertという指定をすることで文字列を追加できます。

最初の選択状態はこうなっています。strongタグを挿入します。
最初の選択状態はこうなっています。strongタグを挿入します。

見事に追加されました!
見事に追加されました!

この時のコードは以下のようになります。

// 強調タグで囲む
$('#wrap-strong').click(function(){
  $('#textarea')
    // <strong> を選択テキストの前に挿入
    .selection('insert', {text: '</strong><strong>', mode: 'before'})
    // </strong> を選択テキストの後に挿入
    .selection('insert', {text: '', mode: 'after'});
});

before/afterで文字列の挿入位置を決められます。

さらにリンクタグを追加します。このときreplaceによって選択されている文字を置換しています。これを行うと文字列の選択状態が維持されます。面白いやり方ですね。コードは以下のようになります。

// リンクタグで囲む
$('#wrap-link').click(function(){
  // 選択テキストを取得
  var selText = $('#textarea').selection();
  $('#textarea')
    // <a href=" を選択テキストの前に挿入
    .selection('insert', {text: '<a href="', mode: 'before'})
    // 選択テキストを http:// に置き換える(http:// を選択状態に)
    .selection('replace', {text: 'http://'})
    // ">選択テキスト</a> を選択テキストの後に挿入
    .selection('insert', {text: '">'+ selText + '', mode: 'after'});
});

さらにjQuery.selectionはテキストボックス、テキストエリアに限らず普通に表示されているテキストでも使えます。

テキストを取り出すデモ。
テキストを取り出すデモ。

// Get selected text / 選択部分のテキストを取得
$('#sel-text').click(function(){
  $('#result').text($.selection());
});

// Get selected html / 選択部分のHTMLを取得
$('#sel-html').click(function(){
  $('#result').text($.selection('html'));
});

テキストとして取り出した場合も表示上の段落がちゃんと維持されているのが特徴です。htmlを指定した場合はHTMLタグも含めて取得できます。どちらも使い勝手が良さそうです。

Web上でユーザに入力してもらう時に引用元として使えるようにしたり、コピー&ペーストの手間なく使えるのが便利そうです。行っていることはシンプルでも実装しようと思うとコードが増えがちなのでjQuery.selectionを使ってさくっと実現するのが良さそうです。

jQuery.selectionはjQuery/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

jQuery.selection - jQuery plugin

madapaja/jquery.selection

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2