jQuery convert line breaks to br (nl2br equivalent)

Question

I'm having jQuery take some textarea content and insert it into an li.

I want it to visually retain the line breaks.

There must be a really simple way to do this...

Beamer

XSS note:If you're doing this it sounds like you're directly mixing user input and <br/>'s, which means you're either displaying newlines or <br/s>, and thus may be open to XSS attack, that is if your input is coming from any other user on the site. – Defilade

Answer 1

demo: http://so.devilmaycode.it/jquery-convert-line-breaks-to-br-nl2br-equivalent

function nl2br (str, is_xhtml) {   
    var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';    
    return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1'+ breakTag +'$2');
}

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

Poulterer

Thank you this works perfectly. Odd how this isn't an official function of jQuery. – Beamer

cause jQuery is not meant to replace native javascript function like replace, it is focused on CSS selector chaining and easy access! maybe in future version;-) – Poulterer

Awesome. Helped me get past the problem with IE7 not supporting white-space: pre-wrap – Leilaleilah

Wouldn't that regex mean if a line ends with ">" it wouldn't add the BR? I know in my HTML I use &gt; but user generated content doesn't work so well with that... – Lingwood

@DaveStein no I have tried this with both '>' and '&gt;' and both times the line breaks are added. I think this function code is basically perfect :) – Fortyfour

Neat! But what's with the (str+'').replace()?? why not just str.replace()? – Caricaria

@neokio: to be sure str is a string? – Poulterer

Anybody else getting double <br>'s with this function? Seems like a similar issue to the php version, but I can't seem to fix it: #11275506 – Impatiens

It was not removing line breaks completely from my code instead it was always leaving behind line breaks and adding <br/> i fixed it by removing the $1 and $2 from return statement like this: return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, breakTag) – Algebra

Answer 2

you can simply do:

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

Chap

Cheers, this kind of worked, except it would treat multiple line breaks as a single line break. – Beamer

I've updated it and now it uses a regexp so if you want to treat multiple line breaks as a single br change the regexp with: /\n+/g – Chap

Thank you. Hopefully someone will find your answer useful, but the function below works as well. I feel kind of bad that you're making more effort, but a function is more desirable. – Beamer

if you get the error "x.replace is not a function" then use x.toString().replace – Mather

Answer 3

In the spirit of changing the rendering instead of changing the content, the following CSS makes each newline behave like a <br>:

white-space: pre;
white-space: pre-line;

Why two rules: pre-line only affects newlines (thanks for the clue, @KevinPauli). IE6-7 and other old browsers fall back to the more extreme pre which also includes nowrap and renders multiple spaces. Details on these and other settings (pre-wrap) at mozilla and css-tricks (thanks @Sablefoste).

While I'm generally averse to the S.O. predilection for second-guessing the question rather than answering it, in this case replacing newlines with <br> markup may increase vulnerability to injection attack with unwashed user input. You're crossing a bright red line whenever you find yourself changing .text() calls to .html() which the literal question implies would have to be done. (Thanks @AlexS for highlighting this point.) Even if you rule out a security risk at the time, future changes could unwittingly introduce it. Instead, this CSS allows you to get hard line breaks without markup using the safer .text().

Namedropper

Depending upon the case, this is the simplest solution, and really answers the question best. You might also consider any of the the other white-space: options, such as pre-wrap. See css-tricks.com/almanac/properties/w/whitespace – Skip

This is really the best answer - string replacement solutions would mean the need to use .html() to set the content, which in turn would allow the user to insert arbitrary HTML unless you filter that out in advance. – Merna

Good point about .html() danger @AlexS, tried to incorporate. – Namedropper

Answer 4

Put this in your code (preferably in a general js functions library):

String.prototype.nl2br = function()
{
    return this.replace(/\n/g, "<br />");
}

Usage:

var myString = "test\ntest2";

myString.nl2br();

creating a string prototype function allows you to use this on any string.

Transpontine

Answer 5

Solution

Use this code

jQuery.nl2br = function(varTest){
  return varTest.replace(/(\r\n|\n\r|\r|\n)/g, "<br>");
};

Trimer

Answer 6

This JavaScript function considers whether to use insert or replace to handle the swap.

(Insert or replace HTML line breaks)

/**
 * This function is same as PHP's nl2br() with default parameters.
 *
 * @param {string} str Input text
 * @param {boolean} replaceMode Use replace instead of insert
 * @param {boolean} isXhtml Use XHTML 
 * @return {string} Filtered text
 */
function nl2br (str, replaceMode, isXhtml) {

  var breakTag = (isXhtml) ? '<br />' : '<br>';
  var replaceStr = (replaceMode) ? '$1'+ breakTag : '$1'+ breakTag +'$2';
  return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, replaceStr);
}

Demo - JSFiddle

JavaScript nl2br & br2nl functions

Liliuokalani

Answer 7

I wrote a little jQuery extension for this:

$.fn.nl2brText = function (sText) {
    var bReturnValue = 'undefined' == typeof sText;
    if(bReturnValue) {
        sText = $('<pre>').html(this.html().replace(/<br[^>]*>/i, '\n')).text();
    }
    var aElms = [];
    sText.split(/\r\n|\r|\n/).forEach(function(sSubstring) {
        if(aElms.length) {
            aElms.push(document.createElement('br'));
        }
        aElms.push(document.createTextNode(sSubstring));
    });
    var $aElms = $(aElms);
    if(bReturnValue) {
        return $aElms;
    }
    return this.empty().append($aElms);
};

Impalpable

Answer 8

to improve @Luca Filosofi's accepted answer,

if needed, changing the beginning clause of this regex to be /([^>[\s]?\r\n]?) will also ingore the cases where the newline comes after a tag AND some whitespace, instead of just a tag immediately followed by a newline

Eveevection

Answer 9

Another way to insert text from a textarea in the DOM keeping the line breaks is to use the Node.innerText property that represents the rendered text content of a node and its descendants.

As a getter, it approximates the text the user would get if they highlighted the contents of the element with the cursor and then copied to the clipboard.

The property became standard in 2016 and is well supported by modern browsers. Can I Use: 97% global coverage when I posted this answer.

Leclair