demo

Question

我正在为我的网络应用程序构建一个评论模块。

在应用程序中我需要评论。当用户发表评论时，我希望jQuery获取TextArea的值，然后将其插入页面<p>。问题是，当它插入内容时，它会丢失HTML格式，主要是分页/返回，这会使用户感到困惑。如何修复代码以保留HTML样式？

代码段： comments.js

var textsubmitted = $("#write-new-comment-textarea").val();
var commentStr = '<li><div class=\"comment-header\"><span class=\"comment-avatar\"><a href=\"/user-view/' + data.personid + '/\"><img src=\"' + data.profilepicsrc + '\" /></a> </span><span class=\"comment-author\"><a href=\"/user-view/' + data.personid + '/\"> <b>' + data.personname + '</b> </a></span><span class=\"comment-timestamp\">just now</span> </div><div class=\"comment-body\"><p>' + textsubmitted + '</p></div></li>';

由于

Answer 1

试试这个..

demo

var textsubmitted = $("#write-new-comment-textarea").val();
var commentStr = '<li><div class=\"comment-header\">'+
                    '<span class=\"comment-avatar\">'+
                        '<a href=\"/user-view/' + data.personid + '/\">'+
                             '<img src=\"' + data.profilepicsrc + '\" />'+
                         '</a>'+
                    '</span>'+
                    '<span class=\"comment-author\">'+
                        '<a href=\"/user-view/' + data.personid + '/\">'+
                             '<b>'+ data.personname + '</b>'+
                        '</a>'+
                    '</span>
                    <span class=\"comment-timestamp\">just now</span>'+
                   '</div>'+
                   '<div class=\"comment-body\">'+
                       '<p>' + brbr(textsubmitted) + '</p>'+
                   '</div></li>';

function brbr(str) { 
    var breakTag = '<br>';
    return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1'+ breakTag +'$2');
}

Answer 2

您需要转义textubmitted字符串。如果设置div的text属性，jquery会自动执行该操作。因此，您只能构建commentsStr的HTML部分，将其附加到dom，然后稍后为其分配文本值。

var textsubmitted = $("#write-new-comment-textarea").val();
var commentStr = '<li><div class=\"comment-header\"><span class=\"comment-avatar\"><a href=\"/user-view/' + data.personid + '/\"><img src=\"' + data.profilepicsrc + '\" /></a> </span><span class=\"comment-author\"><a href=\"/user-view/' + data.personid + '/\"> <b>' + data.personname + '</b> </a></span><span class=\"comment-timestamp\">just now</span> </div><div class=\"comment-body\"><p></p></div></li>';
$("div.comment-body").text(textsubmitted);

Answer 3

这也很好地工作了： var textsubmitted2show = $('#write-new-comment-textarea').val().replace(/\n/g,'<br />');

如何获取textarea值，并维护HTML样式

3 个答案:

demo