[英]Create list html from selected text in Textarea
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. 我发现了使用jquery将来自textarea的选定文本包装在html标记中的各种示例,但是当选择多行文本时,我想稍作修改以创建一个列表。
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. 当前,下面的代码将整个选择包装在列表标记中,但是我也想将所有回车换成列表项目的结束标记和开始标记-因此文本区域中的每一行都是一个新的列表项。
I think one of the problems might be that the .val function reads the text area as a single line. 我认为问题之一可能是.val函数将文本区域读取为一行。
jquery: 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>");
});
});
body: 身体:
<textarea id="markItUp" cols="80" rows="20"></textarea>
<br />
<input type="button" value="Bold" id="BoldIt" />
split your text like this: 像这样分割文本:
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>");
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.