Как получить значение textarea и поддерживать стиль HTML

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

Вам нужно экранировать отправленную текстовую строку. Если вы установите свойство text для div, jquery автоматически сделает это. Таким образом, вы можете создать только HTML-часть вашей commentsStr, добавить ее в 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 2

Это тоже сработало: var textsubmitted2show = $('#write-new-comment-textarea').val().replace(/\n/g,'<br />');

Answer 3

попробуйте ..

демо

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');
}​