从 Textarea 中的选定文本创建列表 html答案

【问题标题】：Create list html from selected text in Textarea从 Textarea 中的选定文本创建列表 html
【发布时间】：2012-04-16 22:44:24
【问题描述】：

我找到了各种使用 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" />

【问题讨论】：

标签： javascript jquery

【解决方案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>");
    });
});

【讨论】：