How to include newlines in jQuery text()

Escape those naughty characters

With the html() method, keep an eagle eye out for the need to escape special HTML characters to prevent XSS attacks or other nasty injection vulnerabilities. Fun utilities like $.text() or fancy custom functions can sanitize user input, all while trimming excess baggage:

var escapedText = $("<div>").text(textWithNewlines).html().replace(/\n/g, '<br>'); // This isn't so hard, is it?
$('#safeElement').html(escapedText); // Safety first!


White spaces in fashion: The CSS way!

The 'white-space' hero

Flex some CSS muscles by setting the white-space property to pre-line for neat newlines in your elements without needing those <br> tags and html():

#element {
  white-space: pre-line; // It's like CSS went to finishing school.
}


Avoid the 'bloating-space' villain

Trim any extra meat off your text to avoid inconveniences like large paddings when using white-space. For better or worse, CSS does pay attention to whitespace:

$('#element').css('white-space', 'pre-line').text(textWithNewlines.trim()); // It’s a bird, it’s a plane, no, it’s SuperTrim!


Pro tips and tricks

Keen for custom?

Design a tidy custom function to convert newline characters into <br/> tags for the Picasso in you who wants more control over text rendering:

function convertNewlines(text) {  // When the in-built isn't good enough for you.
  return text.replace(/\n/g, '<br>');
}
$('#element').html(convertNewlines(textWithNewlines)); // Mix-n-match like a pro.


Dodge performance woes

Feeling adventurous? Create text nodes using document.createElement() to manipulate them directly when you're faced with gigantic text and performance cries meekly:

function createTextWithNewlines(text) {  // Patching up our excellent creation.
  return $('<p>').text(text).html().replace(/\n/g, '<br>'); // Food? Sleep? No, let's createTextWithNewlines!
}
$('#element').append(createTextWithNewlines(textWithNewlines)); // Voila!


Browser bickering

Tolerate no browser bias when dealing with innerText and textContent. You heard it right, browsers too have mood swings:

var textNode = document.getElementById('element').firstChild;
var content = 'Hello\nWorld';

textNode.textContent = (textNode.textContent === undefined) ? textNode.innerText : content; // Quick Fix: If undefined, let's pretend it didn't happen.


Compatibility maze

Keeping it vintage

If you're rolling with the vintage vibes of IE8, ensure you match your methods:

/* For IE8 compatibility */
#element {
  white-space: pre-line; // Because old is gold!
}


Store not hoard

When dealing with newlines, store the jQuery object in a variable to dethrone repeated selections and claim performance supremacy:

var $element = $('#element'); // Isn't it snappy?
// $element is at your service.


In the trenches with edge cases

CSS can't always save the day

At times, CSS might not be your knight in shining armor. Never fear, manually handle newlines with jQuery to take command of the rendered output.

The split-join hustle

Reformat your content by splitting at newline characters, handle each line individually, then bridge them back with <br> tags:

var linesArray = textWithNewlines.split('\n'); // Break 'em.
var htmlReadyText = linesArray.join('<br>'); // And Join ‘em.
$('#element').html(htmlReadyText); // The perfect marriage.
