Create list html from selected text in Textarea
<p>I have found various examples of using jquery to wrap selected text from a textarea in html tags, but I would like to adapt this slightly to create a list when multiple lines of text are selected.</p>

<p>Currently the code below wraps the whole selection in the list tags but I would also like to replace all the carriage returns with the closing and opening tags for list items - so each line in the text area is a new list item.</p>

<p>I think one of the problems might be that the .val function reads the text area as a single line.</p>

<p>jquery:</p>

<pre><code>function listText(elementID, openTag, closeTag) {
    var textArea = $('#' + elementID);
    var len = textArea.val().length;
    var start = textArea[0].selectionStart;
    var end = textArea[0].selectionEnd;
    var selectedText = textArea.val().substring(start, end);
    var replacement = openTag + selectedText + closeTag;
    textArea.val(textArea.val().substring(0, start) + replacement + textArea.val().substring(end, len));
}

$(document).ready(function () {
    $("#BoldIt").click( function() {
        listText("markItUp", "&lt;ul&gt;&lt;li&gt;", "&lt;/li&gt;&lt;/ul&gt;");
    });
});
</code></pre>

<p>body:</p>

<pre><code>&lt;textarea id="markItUp" cols="80" rows="20"&gt;&lt;/textarea&gt;

&lt;br /&gt;

&lt;input type="button" value="Bold" id="BoldIt" /&gt;
</code></pre>
