javascript使用相同的单词编辑文本区域

我有一个用于编辑文本的文本区域。但是如果我在文本区域中有两个相同的单词，我选择底部的单词并按下粗体按钮。第一次检测到的单词将变为粗体，而不是选定的单词。这个JSFIDLE链接帮助我分配： 工作代码示例：

如何让我的代码使所选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>

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

JavaScript:

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

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

函数格式文本（el，标记）{
var selectedText=document.selection？document.selection.createRange（）。文本：el.value.substring（el.selectionStart，el.selectionEnd）；
if（标记==“b”&&selectedText.indexOf（“”）！=-1）{
el.value=el.value.replace（“，”）；
el.value=el.value.replace（“，”）；
}
if（标记==“i”&&selectedText.indexOf（“”）！=-1）{
el.value=el.value.replace（“，”）；
el.value=el.value.replace（“，”）；
}
如果（标记==“u”&&selectedText.indexOf（“”）！=-1）{
el.value=el.value.replace（“，”）；
el.value=el.value.replace（“，”）；
}
如果（已选择文本！=''）{
var newText=''+selectedText+''；
el.value=el.value.replace（已选择文本，新文本）
}
}
功能myFunction（选择标签，el）{
var selectedText=document.selection？document.selection.createRange（）。文本：el.value.substring（el.selectionStart，el.selectionEnd）；
var listValue=selectTag.options[selectTag.selectedIndex].text；
如果（已选择文本！=''）{
如果（选择文本索引（“Verdana”）！=-1）{
el.value=el.value.replace（“Verdana”，listValue）；
}else if（selectedText.indexOf（“Arial”）！=-1）{
el.value=el.value.replace（“Arial”，列表值）；
}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（“幻想”）！=-1）{
el.value=el.value.replace（“幻想”，列表值）；
}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（“冲击”，列表值）；
}else if（selectedText.indexOf（“乔治亚”）！=-1）{
el.value=el.value.replace（“格鲁吉亚”，listValue）；
}
}
如果（已选择文本！=''）{
var listValue=selectTag.options[selectTag.selectedIndex].text；
var newText=''+selectedText+''；
el.value=el.value.replace（已选择文本，新文本）
}
}
函数myFunctionSize（选择标签，el）{
var selectedText=document.selection？document.selection.createRange（）。文本：el.value.substring（el.selectionStart，el.selectionEnd）；
var listValue=selectTag.options[selectTag.selectedIndex].text；
如果（已选择文本！=''）{
如果（已选择文本索引（“1”）！=-1）{
el.value=el.value.replace（“1”，列表值）；
}else if（selectedText.indexOf（“2”）！=-1）{
el.value=el.value.replace（“2”，列表值）；
}else if（选择文本索引of（“3”）！=-1）{
el.value=el.value.replace（“3”，列表值）；
}else if（selectedText.indexOf（“4”）！=-1）{
el.value=el.value.replace（“4”，列表值）；
}else if（选择文本索引（“5”）！=-1）{
el.value=el.value.replace（“5”，列表值）；
}else if（selectedText.indexOf（“6”）！=-1）{
el.value=el.value.replace（“6”，列表值）；
}else if（选择文本索引（“7”）！=-1）{
el.value=el.value.replace（“7”，列表值）；
}
}
如果（已选择文本！=''）{
var listValue=selectTag.options[selectTag.selectedIndex].text；
var newText=''+selectedText+''；
el.value=el.value.replace（已选择文本，新文本）
}
}
函数预览（）{
设置超时（预览，10）；
var文本框，视图；
textbox=document.getElementById（'my_textarea'）；
视图=document.getElementById（“预览”）；
view.innerHTML=textbox.value；
}

您应该使用从选择到

子字符串的范围索引

replace
将替换它遇到的第一个事件。
我该怎么做？我不知道；我真的不了解那部分索引。你能举个例子吗？