Adding formatting tags to textbox value
<p>In my form I want to allow the user to format text and add lists and such (basic html functionality, without having to know html).</p>

<p>Using the Bold button as an example:</p>

<pre><code>&lt;div class="goBold button"&gt;B&lt;/div&gt;
&lt;input type="text" name="txtMessage" /&gt;
&lt;script&gt;
$(".goBold").click(function() {
    formatText("bold");
});

function formatText(formatType)
{
    var input = $("#txtMessage");
    var text = input.val();
    var ss = input[0].selectionStart;
    var se = input[0].selectionEnd;

    if (formatType == "bold")
    {
        if (ss == se)
        {
            // there's no text in the textbox, so just write in the tags
            input.val(text + "[b][/b]");
        }
        else
        {
            // surround the highlighted text with the tags
            input.val(text.substr(0, ss) + "[b]" + text.substr(ss, se) + "[/b]" + text.substring(se, text.length));
        }
    }
}
&lt;/script&gt;
</code></pre>

<p>While all this works, there is a slight problem:</p>

<p>Lets assume my text value for this textbox is</p>

<blockquote>
  <p>The quick red fox jumps over the lazy brown dog. This is the only sentence in the English language that uses all 26 letters of the alphabet</p>
</blockquote>

<p>With the words <code>all 26 letters</code> highlighted, clicking the bold button will wrap the text in the tags, but it will also add a second copy of the text that exists after the selection.</p>

<p>I'm not sure why this is, can anyone provide any insight here?</p>

<p>TIA :)</p>
