テキストボックスに文字列やタグを挿入する方法

テキストボックスのカーソルで選択した部分に文字列、もしくはタグを挿入させたいのですが、
例えば
あいう｜えお｜でえおの部分をカーソルで選択して、何かボタンなどを押下すると自動で
あいう<s>えお<s>といった具合にタグを挿入してほしいのです。
ホームページで調べたところ、
テキストエリアで実現する方法が下のURLでみつけたのですが、
http://archiva.jp/web/javascript/getRange_in_tex …
テキストボックスで実行したいのですが、上の方法ではうまくいきません。
テキストボックスの場合どうすればいいのでしょうか？
どなたか回答よろしくお願いいたします。

また、上のホームページで使われているJavaScriptを載せます。
function surroundHTML(tag, obj) {
var target = document.getElementById(obj);
var pos = getAreaRange(target);
var val = target.value;
var range = val.slice(pos.start, pos.end);
var beforeNode = val.slice(0, pos.start);
var afterNode = val.slice(pos.end);
var insertNode;

if (range || pos.start != pos.end) {
insertNode = '<' + tag + '>' + range + '</' + tag + '>';
target.value = beforeNode + insertNode + afterNode;
}
else if (pos.start == pos.end) {
insertNode = '<' + tag + '>' + '</' + tag + '>';
target.value = beforeNode + insertNode + afterNode;
}
}

function getAreaRange(obj) {
var pos = new Object();

if (isIE) {
obj.focus();
var range = document.selection.createRange();
var clone = range.duplicate();
clone.moveToElementText(obj);
clone.setEndPoint('EndToEnd', range);
pos.start = clone.text.length - range.text.length;
pos.end = clone.text.length - range.text.length + range.text.length;
}
else if (window.getSelection()) {
pos.start = obj.selectionStart;
pos.end = obj.selectionEnd;
}
return pos;
alert(pos.start + "," + pos.end);
}
var isIE = (navigator.appName.toLowerCase().indexOf('internet explorer') + 1 ? 1 : 0);

No.1 回答者： fujillin 回答日時： 2011/06/22 10:26

日和って

<textarea cols="60" rows="1" name="text" style="overflow:hidden;">
なんてのじゃ、ダメですよね？（笑）


要は、選択範囲の取得の問題かと…

テキストエリアに限らず取得可能なようなので、以下の情報がご参考になるかと思います。
（内容の検証してはいません）
http://blog.wonder-boys.net/?p=342
http://wiki.bit-hive.com/tomizoo/pgdiff/?pg=Java …
http://d.hatena.ne.jp/brazil/20061021/1161377936
http://blog.iss.ms/2008/09/20/143725