How to replace \n with <br /> in JavaScript?

by

I have a textarea where I insert \n when user presses enter. Code from this textarea is sent to a WCF service via jQuery.ajax(). I cannot save \n in DB as it won’t show in other applications consuming the service.

How can i replace \n with <br /> tag?

solution

Well many of you tried and some got right with Javascript Regex with /g (global modifier).
At the end i had \n inserted twice, i don’t know why, my only guess is that jQuery on keypress event created double \n which i debug.

$('#input').keypress(function (event) {
    if (event.which == '13') {
        inputText = $('#input').val() + '\n';
        $('#input').val(inputText);
    }
});

13 thoughts on “How to replace \n with <br /> in JavaScript?”

  4. Like said in comments and other answer, it’s better to do it on server side.

    However if you want to know how to do it on clientside this is one easy fix: 

    textareaContent.replace(/\\n/g, "<br />");

    Where textareaContent is the variable with the data in the textarea.

    Edit: Changed so that it replaces globally and not only first match.

    Reply

  8. you can use javascript built in replace function with a little help of regex, for example

    $('#input').val().replace(/\n\r?/g, '<br />')

    this code will return all enters replaced with <br>

    Reply

  9. Building on the other answers, this is probably done best by php. Now assuming you don’t want to ajax this (which would be pointless and cause unnecessary server load), you should probably use phpjs.org‘s javascript port of this function:

    function nl2br (str, is_xhtml) {
    // Converts newlines to HTML line breaks  
    // 
    // version: 1103.1210
    // discuss at: http://phpjs.org/functions/nl2br    // +   original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +   improved by: Philip Peterson
    // +   improved by: Onno Marsman
    // +   improved by: Atli Þór
    // +   bugfixed by: Onno Marsman    // +      input by: Brett Zamir (http://brett-zamir.me)
    // +   bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +   improved by: Brett Zamir (http://brett-zamir.me)
    // +   improved by: Maximusya
    // *     example 1: nl2br('Kevin\nvan\nZonneveld');    // *     returns 1: 'Kevin\nvan\nZonneveld'
    // *     example 2: nl2br("\nOne\nTwo\n\nThree\n", false);
    // *     returns 2: '<br>\nOne<br>\nTwo<br>\n<br>\nThree<br>\n'
    // *     example 3: nl2br("\nOne\nTwo\n\nThree\n", true);
    // *     returns 3: '\nOne\nTwo\n\nThree\n'    var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '' : '<br>';

    return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2');
}

    http://phpjs.org/functions/nl2br:480

    Reply

  10. I know this is an ancient question/answer but it’s one of the first to come up on a google search and no longer works here in the distant future with current browsers.

    The correct answer to convert the \n to <br /> (at least for me) is:

    text = text.Replace(/\\n/g,"<br />");
    Reply

  11. The following will replace all instances of \n with a <br /> :

    while (message.indexOf("\\n") !== -1) {
   message = message.replace("\\n", "<br />");
}
    Reply

Leave a Comment