livedoor ナレッジ

関数化の方法を教えてください

function bold(){
if(document.all){ //IE
var str=document.selection.createRange().text;
if (str != "") {
document.selection.createRange().text="<b>" + str + "</b>";
} else {
document.form1.CBBE_TEXT.value += "<b></b>"
}
} else { //Firefox
var el=document.getElementById('text');
var sPos = el.selectionStart;
var ePos = el.selectionEnd;
var str = el.value.substring(sPos, ePos);
el.value = el.value.substring(0, sPos) +
"<b>" + str + "</b>" + el.value.substr(ePos);
}
}

function italic(){
if(document.all){ //IE
var str=document.selection.createRange().text;
if (str != "") {
document.selection.createRange().text="<i>" + str + "</i>";
} else {
document.form1.CBBE_TEXT.value += "<i></i>"
}
} else { //Firefox
var el=document.getElementById('text');
var sPos = el.selectionStart;
var ePos = el.selectionEnd;
var str = el.value.substring(sPos, ePos);
el.value = el.value.substring(0, sPos) +
"<i>" + str + "</i>" + el.value.substr(ePos);
}
}
を
<input type="button" value="太字" onclick="bold()">
<input type="button" value="斜字" onclick="italic()">
で制御しています。
上の2つの関数をまとめて1種類の関数化できませんか？

CSS 使うとか、色々あるかも知れませんが、関数はこんな感じでどうでしょう？

function markup(tag){
   var begin = "<" + tag + ">";
   var end = "</" + tag + ">";
   if(document.all){ //IE
       var str=document.selection.createRange().text;
       if (str != "") {
           document.selection.createRange().text=begin + str + end;
       } else {
           document.form1.CBBE_TEXT.value += begin + end;
       }
   } else { //Firefox
       var el=document.getElementById('text');
       var sPos = el.selectionStart;
       var ePos = el.selectionEnd;
       var str = el.value.substring(sPos, ePos);
       el.value = el.value.substring(0, sPos) +
       begin + str + end + el.value.substr(ePos);
   }
}

<input type="button" value="太字" onclick="markup('b')">
<input type="button" value="斜字" onclick="markup('i')">