如何从textarea获取文本,包括换行符?

时间:2015-03-11 16:00:50

标签: javascript jquery html

在jquery中,我试图从textarea标记中获取文本,新行为\n而不是br标记。问题是如果我选择它并获得它的val,则firefox调试器甚至不会显示\nbr。如果我提醒它,那么我看到有两行,但是如果我将它插入DOM,它将删除所有新行。我希望它能保持新的界限。

我是这样的:

var handleSend = function(thread_id) {
    var user = GLOBAL_DATA.user;

    $(context).find("#message-form").unbind('submit').submit(function() {

        var field = $(this).find("textarea");

        runAJAXSerial($(this).serialize(), {
            page : 'message/setmessage',
            id : user['id'],
            thread_id : thread_id
        }, function(response) {
            var user = GLOBAL_DATA.user;

            var obj = {
                user_id : user['id'],
                message : field[0].value.replace(/<br\s*\/?>/mg,"\n"),
                date_sent : getDate() + ' ' + getTime()
            };
            alert(obj.message);
            cleanResponse(obj);

            field.val("").focus();

            displayMessages([obj], true);
        }, function(data,status,xhr) {

        });

        return false;
    });
};

function cleanResponse(response) {
    if (Object.prototype.toString.call( response ) === '[object Array]') {
        var i = 0, l = response.length;
        for (i=0; i<l; i+=1) {
            response[i] = cleanResponse(response[i]);
        }
    } else if (Object.prototype.toString.call( response ) === '[object Object]') {
        for (var property in response) {
            if (response.hasOwnProperty(property)) {
                response[property] = cleanResponse(response[property]);
            }
        }
    } else {
        response = escapeHTML(response);
    }
    return response;
}

function escapeHTML(str) {
    return $("<p/>").text(str).html();
}

var displayMessages = function(response, onBottom) {
    var user = GLOBAL_DATA.user, i=0, l=response.length, acc = '';

    for(i=0; i<l; i+=1) {
        var obj = response[i];

        var acc_temp = "";
        acc_temp += '<div class="message ' + (obj['user_id']==user['id'] ? 'message-right' : 'message-left') + '">';
        acc_temp += '<img src="' + getImage(obj['user_id']) + '" align="right" class="message-image" />';
        acc_temp += '<div>' + Autolinker.link(obj['message']) + '</div>';
        acc_temp += '<br/>';
        if (obj['user_id']!=user['id']) {
            acc_temp += '<div class="message-details">' + obj['first_name'] + ' ' + obj['last_name'] + '</div>';
        }
        acc_temp += '<div class="message-details">' + obj['date_sent'] + '</div>';
        acc_temp += '</div>';

        acc = acc_temp + acc;
    }

    addMessage(acc, onBottom);
};

var addMessage = function(html, onBottom) {
    var list = $(context).find("#message-list");
    if (onBottom) {
        list.append(html);
        scrollBot();
    } else {
        list.prepend(html);
    }
};

displayMessages将文本插入DOM。 cleanResponse对文本进行编码,以便用户无法执行脚本。

有谁知道什么是错的?

由于

1 个答案:

答案 0 :(得分:1)

DOM中的新行被视为与任何其他空格一样。您正在获得添加新行的预期行为。

如果您希望呈现新行,则需要使用<br>元素或修改white-space CSS属性。