textareaの選択範囲を取得し、前後に文字列を挿入する

2007–03–23

textareaの中で選択した文字列の前後に、任意の文字列を挿入するJavascript。流れとしては、まず選択領域の始点と終点の位置を取得し、その境界を基準にしてtextareaの文字列全体を分割。そして加工して組みなおす。

始点と終点の位置は、Mozillaおよび（最近の）Opera/Safariでは容易に取得できる。問題はIE。IEのTextRangeオブジェクトは、後のコンテクストを見て処理を行うことが難しいため、特にtextarea内の文字列を操作したい場合は厄介です。

逆に言えば、始点と終点の位置さえ判ればなんとかなるので、いろいろ試してみてなんとか形に出来ました。

Sample

memo: サンプルのテキストは、以前書いた記事「環境は人を造るか？」より抜粋。

Script

1. function getAreaRange(obj) {
2. var pos = new Object();
3.  
4. if (isIE) {
5. obj.focus();
6. var range = document.selection.createRange();
7. var clone = range.duplicate();
8.  
9. clone.moveToElementText(obj);
10. clone.setEndPoint( 'EndToEnd', range );
11.  
12. pos.start = clone.text.length - range.text.length;
13. pos.end = clone.text.length - range.text.length + range.text.length;
14. }
15.  
16. else if(window.getSelection()) {
17. pos.start = obj.selectionStart;
18. pos.end = obj.selectionEnd;
19. }
20.  
21. return pos;
22. // alert(pos.start + "," + pos.end);
23. }
24. var isIE = (navigator.appName.toLowerCase().indexOf('internet explorer')+1?1:0);

ここが要。選択領域の位置を取得している部分。既存の選択領域とは別の選択領域を用意し、新しい選択領域でtextareaを選択。始点あるいは終点を操作し、２つの選択領域の文字数をカウントすることで位置を割り出す。

note: 「clone.setEndPoint( 'EndToEnd', range );」で、「cloneの終点をrangeの終点に合わせる」の意。

1. function surroundHTML(tag, obj) {
2. var target = document.getElementById(obj);
3. var pos = getAreaRange(target);
4.  
5. var val = target.value;
6. var range = val.slice(pos.start, pos.end);
7. var beforeNode = val.slice(0, pos.start);
8. var afterNode = val.slice(pos.end);
9. var insertNode;
10.  
11. if (range || pos.start != pos.end) {
12. insertNode = '<' + tag + '>' + range + '</' + tag + '>';
13. target.value = beforeNode + insertNode + afterNode;
14. }
15.  
16. else if (pos.start == pos.end) {
17. insertNode = '<' + tag + '>' + '</' + tag + '>';
18. target.value = beforeNode + insertNode + afterNode;
19. }
20. }

境界の座標が判れば、後は「分割 → 追加 → 再統合」の流れでOK。この場合は選択領域だけでなく、まだ選択していない状態でもキャレット（文字の入力位置を示すポインタ）の位置に挿入できるようになっている ...が、この操作は関数getAreaRange()にて「obj.focus()」していないとIEでは巧くいかなかったりする。注意。

参照: Experts Exchange, IE - textarea caret position

Posted in /web/javascript
ブックマークする: