javascript 동일한 단어가 포함 된 텍스트 영역

Question

텍스트를 편집하는 데 사용하는 텍스트 영역이 있습니다.하지만 해당 텍스트 영역에 동일한 단어가 두 번 있으면 하단 단어를 선택하고 굵게 버튼을 누릅니다. 처음 발견 된 단어는 굵게 표시되고 선택한 단어는 표시되지 않습니다. 이 jsfiddle 링크 나 충당 도왔 : jsfiddle 작업 코드 예제 : jsfiddle

가 어떻게 내 코드는 선택의 에디터가 대담 할 수 있도록 얻을하지 않는 첫 번째 검색 단어를?

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; 
} 

자바 스크립트 : 당신은 이리저리 범위의 인덱스를 사용한다

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

선택한 텍스트는 substring입니다.

replace이 처음 나타나는 것을 대체합니다.