Using new line(\n) in string and rendering the same in HTML

html

responsive-design

performance

best-practices

byNikita Barsukov·Nov 6, 2024

For an instantaneous solution, make use of JavaScript to replace \n with   tags, which can render new lines in HTML:

let str = "First Line\nSecond Line";
document.body.innerHTML = str.replace(/\n/g, "<br>");

This will swap every \n in your string to an HTML   tag, making it properly display on your web page.

Wrestling with whitespace property

To preserve whitespace and new lines within your HTML content, you can use the magic CSS white-space: pre-wrap; property. It calms down those rebel new lines without mutating \n to the   tag.

.preformatted-text {
  white-space: pre-wrap; /* Let's calm the rebellion */
}

To mark an HTML element for preserving the strings, just tag it with this class:

<div class="preformatted-text">
  First Line
  Second Line
</div>

jQuery shield

If you reside in the jQuery kingdom, the .html() method is the knight in shiny armor to set a string content directly inside a <div> element:

let str = "First Line\nSecond Line";
$('#content').html(str.replace(/\n/g, "<br>")); /* Who needs Excalibur when you've jQuery? */

Ensure to lay down the jQuery library in your HTML battlefield to wage this war effectively.

No mutation zone

If you're against mutating the string to replace \n with  , enclose your string with a <pre> armor. It not only shields your string from mutation but also conserves its original format:

<pre>First Line
Second Line</pre>

Customize your <pre> armor using jQuery's .css() method:

$('pre').css({
  'background-color': '#f3f3f3', /* Who says armor can't be stylish */
  'border': '1px solid #ddd',
  // Put on your favorite armor color here...
});

Knowledge upgrade

innerHTML: Use with discretion

Setting innerHTML directly can set the stage for XSS attacks, opening security loopholes. Always sanitize the content if it's from an untrustworthy source:

const safeStr = str.replace(/[<>"'&]/g, (match) => ({
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#39;',
    '&': '&amp;',
})[match]); 
/* It's like cleaning your room before guests arrive */

document.body.innerHTML = safeStr.replace(/\n/g, "<br>");

Efficient nodes

When interacting with pure text and avoiding HTML tagging, prefer textContent over innerHTML for better performance and security:

let textNode = document.createTextNode(str); /*  Creating a text node, no big deal */

document.body.appendChild(textNode); /* Adding to the family tree... */

Dynamic updates

Working with dynamically updated content? Don't forget your event-listeners to mirror user inputs in real-time:

inputElement.addEventListener('input', function() {
  let freshText = this.value; /* Freshly baked from user input oven */
  document.getElementById('display').innerText = freshText;
});