javascript edit textarea with same words

Question

I have a text area that I use to edit text in. but if I have two times the same words in that textarea and I select the bottom word and press the bold button. the word that is first detected gets bold and not the selected word. this jsfiddle link helped me allot: jsfiddle working code example: jsfiddle

How do I get my code to make the selected tekst to be bold and not the first detected word?

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

You should use the range indexes from the selection to substring the text.

replace will replace the first occurrence it comes across.