How do I replace all line breaks in a string with <br /> elements?

Understanding line breaks in a cross-platform world

Different platforms have different conventions for line breaks. UNIX-based systems (like Linux or macOS) use \n, whereas Windows traditionally uses \r\n. JavaScript, the international diplomat, gives us a handy regular expression to bridge these differences:

let text = "Line 1\r\nLine 2"; // Windows style!
let newText = text.replace(/(\r\n|\r|\n)/g, "<br />"); // All styles are welcome here


The | character in the regex is like an open invitation—it matches either \r\n (as in Windows), \r, or \n! The g flag makes sure the whole document gets invited to the <br /> party.

Tidying up trailing and embedded newlines

Handling scenarios such as trailing newlines or sequences of line breaks interjected with whitespace is just as important. We ensure these do not disrupt the visual flow of the rendered HTML content:

let text = "Line 1\n\n \r\nLine 2\n"; // Messy input
let newText = text.replace(/[\r\n]+/g, "<br />").trim(); // Tidy output


The [\r\n]+ gobbles up all sequences of newline characters, being neatly trimmed by .trim(), leaving a clean, professional-looking string behind.

The non-regex way

Regular expressions can be intimidating (they often feel like they're from the Matrix). So here is a reassuringly plain, regex-free method:

let text = "Line 1\nLine 2";
let newText = text.split(/\r\n|\r|\n/).join("<br />"); // Simple as splitting wood


Here, we first split the string into an array at every line break, then join them back together with <br /> glue. Even my grandma could follow this!

A CSS trick

Who said we need JavaScript for everything? We can get CSS to do some of the work for us! By using the white-space property set to pre-line, we can cater to line breaks without any need for JavaScript wizardry:

p {
  white-space: pre-line; // CSS to the rescue!
}


Watch your step!

Don't forget about cross-platform compatibility

Handling both \r\n and \n is not a luxury—it’s a must! We live in a multi-platform world, so our code should too.

Mind the whitespaces

Newline characters are not loners; they love being around whitespace characters. Ensuring that your code handles whitespace gracefully will prevent surprises in your rendered content.

That pesky final newline

Be mindful of one common stumbling block: the situation where a text ends with a newline character. Make sure your code tidies up the last <br /> tag that may get left at the end.