How to grab textarea value, and maintain the HTML Styling

Question

Hello, I'm building a comment module for my web application.

In the application I need commenting. When a user posts a comment, I would like jQuery to grab the TextArea's value and then insert it into the page <p>. Problem is that when it inserts the contents it loses the HTML formatting, mainly page breaks/returns which confuses users. How can I fix the code to retain the HTML styling?

Snippets: 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>';

Thanks

Answer 1

try this..

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

You need to escape your textsubmitted string . If you set the text property of a div , jquery automatically does that . So you can build only the HTML part of your commentsStr , append it to dom and then assign it the text value later .

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

This ended up working nicely too: var textsubmitted2show = $('#write-new-comment-textarea').val().replace(/\n/g,'<br />');