« 富士通 MHY2BH | トップページ | Boot Campパーティションにデフラグをかけてしまいました... »

2007年5月15日 (火)

JavaScriptで選択したテキストをラッピング

このブログにJavaScript経由で辿り着かれる方がけっこういるので、「JavaScriptでカーソルの位置に文字を挿入 その2」に書いたソースの応用編で「選択したテキストのラッピングの仕方」を書いておきます。前回と同様ソースは最小限しか書きません。変数の名称を出来るだけヒントを与えるものにしてありますので、応用して使ってみてください。

まずはHTMLのソース。

<html>
<head>
<title>
</title>
<script type="text/javascript" src="wrap.js">
</script>
</head>
<body>
<input type="button" value="Hogehoge" onclick="wrap()" />
<textarea id="txtarea" cols="50" rows="10">
</textarea>
</body>
</html>


wrap.jsの内容は下記の通りです。

function wrap(){
var tag1 = '';
var tag2 = '
';
var area = document.getElementById('txtarea');
var bun = document.getElementById('txtarea').value;
var nagasa = bun.length;
var hajimari = area.selectionStart;
var owari = area.selectionEnd;
var mae = bun.substr(0, hajimari);
var naka = bun.substr(hajimari, owari-hajimari);
var ushiro = bun.substr(owari, nagasa);
document.getElementById('txtarea').value = mae + tag1 + naka + tag2 + ushiro;
}
これでtextareaに書いた文章の一部をマウス等で選択してボタンを押すと、選択した部分が<HOGE></HOGE>タグにくくわれます。SafariとFirefoxでしか実験していません。


« 富士通 MHY2BH | トップページ | Boot Campパーティションにデフラグをかけてしまいました... »

コメント

コメントを書く

コメントは記事投稿者が公開するまで表示されません。

(ウェブ上には掲載しません)

トラックバック


この記事へのトラックバック一覧です: JavaScriptで選択したテキストをラッピング:

« 富士通 MHY2BH | トップページ | Boot Campパーティションにデフラグをかけてしまいました... »

2019年9月
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30          

最近のトラックバック