Создать список html из выделенного текста в Textarea

Question

Я нашел несколько примеров использования jquery для обертывания выделенного текста из текстового поля в тегах html, но я хотел бы немного его адаптировать, чтобы создать список, когда выбраны несколько строк текста.

В настоящее время приведенный ниже код обертывает весь выбор в тегах списка, но я хотел бы также заменить все возвраты каретки закрывающими и открывающимися тегами для элементов списка, поэтому каждая строка в текстовой области является новым элементом списка.

Я думаю, что одна из проблем может заключаться в том, что функция .val читает текстовую область как одну строку.

JQuery:

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", "<ul><li>", "</li></ul>"); 
    }); 
}); 

тела:

<textarea id="markItUp" cols="80" rows="20"></textarea> 

<br /> 

<input type="button" value="Bold" id="BoldIt" /> 

Answer 1

разделить текст следующим образом:

function listText(elementID, openTag, closeTag) { 
    var textArea = $('#' + elementID); 
    var s = "\n"; 
    var len = textArea.val().length; 
    var start = textArea[0].selectionStart; 
    var end = textArea[0].selectionEnd; 
    var selectedText = textArea.val().substring(start, end); 
    var replacement = ""; 

    var rows = selectedText.substring(start, end).split(s); 

    for(var i = 0; i < rows.length; i++) { 
    replacement += openTag + rows[i] + closeTag + s; 
    } 

    textArea.val(textArea.val().substring(0, start) + replacement + textArea.val().substring(end, len)); 
} 

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