// テキストエリア var field = document.getElementById('textarea'); // ============================================= // キーボードによる改行を<br>タグに変換する // ============================================= // チェックボックス var checkbox = document.getElementById('checkbox'); field.addEventListener('keypress', function(e) { if (e.keyCode == 13 && checkbox.checked) { // テキスト選択の開始インデックス(キャレット位置) var index = field.selectionStart; // 開始インデックスの所に '<br>' を追加 field.value = field.value.substr(0, index) + '<br>' + field.value.substr(index, field.value.length); // 新しいキャレット位置 field.focus(); var newCaret = index + '<br>'.length; field.setSelectionRange(newCaret, newCaret); return false; } }); // ============================================= // 選択テキストをタグで囲む、またはキャレット位置に空のまま挿入する // ============================================= // 挿入する開始タグと終了タグ var tag = new Array('<b>', '</b>'); document.getElementById('button').addEventListener('click', function() { // 選択テキストの開始インデックス(キャレット位置) var start = field.selectionStart; // 選択テキストの終了位置 var end = field.selectionEnd; // 選択テキストの長さ var selected = end - start; // 選択テキスト var target = selected ? field.value.substr(start, selected) : ''; // 選択中のテキストを '<b>' で囲む field.value = field.value.substr(0, start) + tag[0] + target + tag[1] + field.value.substr(end, field.value.length); // '<b>〜</b>'の部分を選択状態にする field.focus(); field.setSelectionRange(start, (start + tag[0].length + selected + tag[1].length) ); });
<p> <textarea id="textarea"><p>あのイーハトーヴォの すきとおった風、 夏でも底に冷たさをもつ青いそら、 うつくしい森で飾られたモーリオ市、 郊外のぎらぎらひかる草の波。</p></textarea> </p> <p> <input id="button" type="button" value="<b>"> <label><input id="checkbox" type="checkbox" value="1"> 改行を<br>タグに変換</label> </p>