今日も適当ダイアリー

PHP や Javascript や Symfony、BEAR.Sunday などのWeb周りのことを中心に。それ以外のことも気まぐれに投稿します。

選択範囲のテキストを操作するjQueryプラグインjQuery.selection

以下の内容は、古い内容です。
新しい記事で情報を確認してください。
http://blog.madapaja.net/entry/2012/05/09/070500


選択範囲のテキストを操作するためのjQueryプラグイン jQuery.selection を書いたので、アップしました。

IE6やFireFox3.5、Google Chrome 6など主要なブラウザでチェック済みです。


ファイルはこちら

http://jquery-selection.googlecode.com/svn/tags/(URLが間違っていたため訂正しました)
http://code.google.com/p/jquery-selection/downloads/list (圧縮ファイル)

簡単な説明

bold;">$.getSelection([mode = 'text']):HTMLドキュメント内の選択されたテキスト/HTMLを取得する
bold;">getSelection():テキストボックス/エリアの選択されたテキストを取得する
bold;">replaceSelection(text[, caret = 'keep']):テキストボックス/エリアの選択されたテキストを置換する
bold;">insertBeforeSelection(text[, caret = 'keep']):テキストボックス/エリアの選択されたテキストの前に文字列を挿入する
bold;">insertAfterSelection(text[, caret = 'keep']):テキストボックス/エリアの選択されたテキストの後に文字列を挿入する
bold;">getCaretPos():テキストボックス/エリアの選択範囲を取得する
bold;">setCaretPos(range):テキストボックス/エリアの選択範囲を設定する

デモも併せてご確認ください。

$.getSelection([mode = 'text'])

HTMLドキュメント内の選択されたテキスト/HTMLを取得する

mode

modeには、'text'もしくは'html'を指定します。
指定しなかった場合は、'text'となります。

返り値

String型で mode に指定した値によって、選択されたテキストか、HTMLテキストが返ります。

getSelection()

テキストボックス/エリアの選択されたテキストを取得する

返り値

String型で選択されたテキストが返ります。

replaceSelection(text[, caret = 'keep'])

テキストボックス/エリアの選択されたテキストを置換する

text

置換後の文字列を指定します。

caret

caretには'keep'か'start'、'end'のいずれかを指定します。
指定しなかった場合は、'keep'となります。

bold;">keep:選択範囲を保持します。(指定したtextが選択状態となります)
bold;">start:キャレットを選択範囲の最初に移動します
bold;">end:キャレットを選択範囲の後ろに移動します

insertBeforeSelection(text[, caret = 'keep'])

テキストボックス/エリアの選択されたテキストの前に文字列を挿入する

text

挿入する文字列を指定します。

caret

caretには'keep'か'start'、'end'のいずれかを指定します。
指定しなかった場合は、'keep'となります。

bold;">keep:選択範囲を保持します。
bold;">start:キャレットを選択範囲の最初に移動します
bold;">end:キャレットを選択範囲の後ろに移動します

insertAfterSelection(text[, caret = 'keep'])

テキストボックス/エリアの選択されたテキストの後に文字列を挿入する

text

挿入する文字列を指定します。

caret

caretには'keep'か'start'、'end'のいずれかを指定します。
指定しなかった場合は、'keep'となります。

bold;">keep:選択範囲を保持します。
bold;">start:キャレットを選択範囲の最初に移動します
bold;">end:キャレットを選択範囲の後ろに移動します

getCaretPos()

テキストボックス/エリアの選択範囲を取得する

返り値

Object型 {start: 選択開始位置, end: 選択終了位置} で選択範囲が返ります。

var pos = $('textarea').getCaretPos();
alert(''+ pos.start + ' から ' + pos.end + 'までが選択されています。');

setCaretPos(range)

テキストボックス/エリアの選択範囲を設定する

range

Object型 {start: 選択開始位置, end: 選択終了位置} で選択範囲を指定します。

var strLen = $('textarea').val().length; // 文字数を取得

// 全て選択します
$('textarea').setCaretPos({
  start: 0,     // 最初から
  end  : strLen // 最後まで
});
ファイルはこちら

http://jquery-selection.googlecode.com/svn/tags/(URLが間違っていたため訂正しました)
http://code.google.com/p/jquery-selection/downloads/list (圧縮ファイル)