我正在爲我的Web應用程序構建註釋模塊。如何抓取textarea值並維護HTML樣式

在應用程序中，我需要評論。當用戶發表評論時，我希望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>';

感謝

來源

2010-07-08 AnApprentice

你追加這個數據？ – 2010-07-08 04:34:14

我把它添加到評論列表（UL） – AnApprentice 2010-07-08 04:39:01

您的選擇的答案有問題..閱讀我的評論下面它... – Reigel 2010-07-08 04:59:03

你需要逃避你textsubmitted字符串。如果你設置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);

來源

2010-07-08 04:43:46

這是切肉刀，但'$（「div.comment-body」）'，不存在......我猜？ :) – Reigel 2010-07-08 04:48:50

與OP的html結構，我知道有很多'$（「div.comment-body」）'...並且您更換它的內容......所有這些...... – Reigel 2010-07-08 04:53:27

試試這個..

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

來源

2010-07-08 04:42:45 Reigel

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

來源

2010-07-08 04:50:47 AnApprentice

如何抓取textarea值並維護HTML樣式

回答

demo

相關問題