javascript編輯帶相同單詞的textarea

Question

我有一個文本區域用於編輯文本，但如果在textarea中有兩個相同的單詞，並選擇底部單詞並按粗體按鈕。首先檢測到的單詞變爲粗體而不是選定的單詞。這個鏈接的jsfiddle幫我配發：jsfiddle 工作的代碼示例：jsfiddle

如何讓我的代碼，使選定tekst要大膽，而不是第一個檢測到的詞？

HTML：

<form action="" method="post"> 
    <table> 
     </tr> 
     <td>Name:</td> 
     <td> 
      <input type="text" name="name" placeholder="Henk" required/> 
     </td> 
     </tr> 
     <tr> 
      <td>Lastname:</td> 
      <td> 
       <input type="text" name="lname" placeholder="de Vries" required/> 
      </td> 
     </tr> 
     <tr> 
      <td>Age:</td> 
      <td> 
       <input type="text" name="age" placeholder="42" required/> 
      </td> 
     </tr> 
     <tr> 
      <td>Profession:</td> 
      <td> 
       <input type="text" name="profession" placeholder="ICT'er" required/> 
      </td> 
     </tr> 
     <tr> 
      <td>Avatar:</td> 
      <td> 
       <input type="text" name="avatar" placeholder="http://www.rsm.nl/fileadmin/default/content/images/smoelenboek/hvries.jpg" required/> 
      </td> 
     </tr> 
     <tr> 
      <td colspan='2'> 
       <input type="button" value="B" onclick="formatText (myTextarea,'b');preview();" /> 
       <input type="button" value="I" onclick="formatText (myTextarea,'i');preview();" /> 
       <input type="button" value="U" onclick="formatText (myTextarea,'u');preview();" /> 
       <select onchange="myFunction(this, myTextarea);"> 
        <option>Times new Roman</option> 
        <option>Verdana</option> 
        <option>Arial</option> 
        <option>Comic Sans MS</option> 
        <option>Fantasy</option> 
        <option>Calibri</option> 
        <option>Monospace</option> 
        <option>Impact</option> 
        <option>Georgia</option> 
       </select> 
       <select onchange="myFunctionSize(this, myTextarea);"> 
        <option>1</option> 
        <option>2</option> 
        <option>3</option> 
        <option>4</option> 
        <option>5</option> 
        <option>6</option> 
        <option>7</option> 
       </select> 
      </td> 
     </tr> 
     <tr> 
      <td colspan='2'> 
       <textarea contenteditable="true" id="my_textarea" name="myTextarea" onkeydown="preview()"></textarea> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <input type="submit" name="submit" /> 
      </td> 
     </tr> 
    </table> 
</form> 
<div id="voorbeeld" class="transparant"> 
    <p id="preview" readonly=""></p> 
</div> 

CSS：

#preview { 
    width:300px; 
    height:150px; 
    border:thin solid #000; 
    color:#000; 
    padding:10px; 
    min-height:150px; 
    min-width:300px; 
    max-height:150px; 
    max-width:300px; 
} 

的JavaScript：

function formatText(el, tag) { 
    var selectedText = document.selection ? document.selection.createRange().text : el.value.substring(el.selectionStart, el.selectionEnd); 
    if (tag == "b" && selectedText.indexOf("<b>") != -1) { 
     el.value = el.value.replace("<b>", ""); 
     el.value = el.value.replace("</b>", ""); 
    } 
    if (tag == "i" && selectedText.indexOf("<i>") != -1) { 
     el.value = el.value.replace("<i>", ""); 
     el.value = el.value.replace("</i>", ""); 
    } 
    if (tag == "u" && selectedText.indexOf("<u>") != -1) { 
     el.value = el.value.replace("<u>", ""); 
     el.value = el.value.replace("</u>", ""); 
    } 
    if (selectedText != '') { 
     var newText = '<' + tag + '>' + selectedText + '</' + tag + '>'; 
     el.value = el.value.replace(selectedText, newText) 
    } 
} 

function myFunction(selectTag, el) { 
    var selectedText = document.selection ? document.selection.createRange().text : el.value.substring(el.selectionStart, el.selectionEnd); 
    var listValue = selectTag.options[selectTag.selectedIndex].text; 
    if (selectedText != '') { 
     if (selectedText.indexOf("Verdana") != -1) { 
      el.value = el.value.replace("Verdana", listValue); 
     } else if (selectedText.indexOf("Arial") != -1) { 
      el.value = el.value.replace("Arial", listValue); 
     } else if (selectedText.indexOf("Times new Roman") != -1) { 
      el.value = el.value.replace("Times new Roman", listValue); 
     } else if (selectedText.indexOf("Comic Sans MS") != -1) { 
      el.value = el.value.replace("Comic Sans MS", listValue); 
     } else if (selectedText.indexOf("Fantasy") != -1) { 
      el.value = el.value.replace("Fantasy", listValue); 
     } else if (selectedText.indexOf("Calibri") != -1) { 
      el.value = el.value.replace("Calibri", listValue); 
     } else if (selectedText.indexOf("Monospace") != -1) { 
      el.value = el.value.replace("Monospace", listValue); 
     } else if (selectedText.indexOf("Impact") != -1) { 
      el.value = el.value.replace("Impact", listValue); 
     } else if (selectedText.indexOf("Georgia") != -1) { 
      el.value = el.value.replace("Georgia", listValue); 
     } 
    } 
    if (selectedText != '') { 
     var listValue = selectTag.options[selectTag.selectedIndex].text; 
     var newText = '<font face="' + listValue + '">' + selectedText + '</font>'; 
     el.value = el.value.replace(selectedText, newText) 
    } 
} 

function myFunctionSize(selectTag, el) { 
    var selectedText = document.selection ? document.selection.createRange().text : el.value.substring(el.selectionStart, el.selectionEnd); 
    var listValue = selectTag.options[selectTag.selectedIndex].text; 
    if (selectedText != '') { 
     if (selectedText.indexOf("1") != -1) { 
      el.value = el.value.replace("1", listValue); 
     } else if (selectedText.indexOf("2") != -1) { 
      el.value = el.value.replace("2", listValue); 
     } else if (selectedText.indexOf("3") != -1) { 
      el.value = el.value.replace("3", listValue); 
     } else if (selectedText.indexOf("4") != -1) { 
      el.value = el.value.replace("4", listValue); 
     } else if (selectedText.indexOf("5") != -1) { 
      el.value = el.value.replace("5", listValue); 
     } else if (selectedText.indexOf("6") != -1) { 
      el.value = el.value.replace("6", listValue); 
     } else if (selectedText.indexOf("7") != -1) { 
      el.value = el.value.replace("7", listValue); 
     } 
    } 
    if (selectedText != '') { 
     var listValue = selectTag.options[selectTag.selectedIndex].text; 
     var newText = '<font size="' + listValue + '">' + selectedText + '</font>'; 
     el.value = el.value.replace(selectedText, newText) 
    } 
} 

function preview() { 
    window.setTimeout(preview, 10); 
    var textbox, view; 
    textbox = document.getElementById('my_textarea'); 
    view = document.getElementById("preview"); 
    view.innerHTML = textbox.value; 
} 

Answer 1

您應該來回使用範圍指標m選擇到substring的文字。

replace將替換它遇到的第一個匹配項。