JavaScript - How to Replace Line Breaks With 'br' Tag?

Here are the different methods to replace line breaks with <br> tag in JavaScript.

1. Using replace() with Regular Expression

The regular expression /\n/g matches all occurrences of line breaks in the string. The g flag ensures global replacement.

let s1 = "Hello\nWorld!\nWelcome to JavaScript.";
let s2 = s1.replace(/\n/g, "<br>");

console.log(s2);

Hello<br>World!<br>Welcome to JavaScript.

• The regular expression /\n/g matches all line breaks (\n) in the string.
• replace(/\n/g, "<br>") replaces every line break with the <br> tag.

2. Using split() and join() Methods

split() divides the string into an array of substrings at each line break, and join() concatenates them back together with <br> tags.

let s1 = "Line 1\nLine 2\nLine 3";
let s2 = s1.split("\n").join("<br>");

console.log(s2); 

Line 1<br>Line 2<br>Line 3

• split("\n") splits the string into an array where each element is a part of the string separated by line breaks.
• join("<br>") joins the array elements back together, inserting <br> tags between each line.

3. Using replace() with \r\n for Windows Line Breaks

If you are dealing with line breaks from Windows-style text (\r\n), you need to adjust the regular expression to handle both \n and \r\n line breaks.

let s1 = "Line 1\r\nLine 2\nLine 3";
let s2 = s1.replace(/(\r\n|\n)/g, "<br>");

console.log(s2); 

Line 1<br>Line 2<br>Line 3

• The regular expression /(\r\n|\n)/g matches both Windows (\r\n) and Unix (\n) line breaks.
• replace(/(\r\n|\n)/g, "<br>") replaces both types of line breaks with <br> tags.

4. Using split() and map() for Custom Formatting

For more advanced use cases where you might want to apply custom formatting while replacing line breaks, you can use split() to convert the string into an array and then use map() to process each part of the string before joining them with <br> tags.

let s1 = "Line 1\nLine 2\nLine 3";
let s2 = s1.split("\n").map(line =>
	line.trim()).join("<br>");

console.log(s2);

Line 1<br>Line 2<br>Line 3

• split("\n") divides the string at each line break.
• map(line => line.trim()) processes each substring to remove extra spaces (optional).
• join("<br>") reassembles the array with <br> tags in between.

5. Using replace() with Multiple Line Break Variants

This approach ensures that both line breaks (\n) and carriage returns (\r) are replaced with the <br> tag, especially when dealing with multiline text from different operating systems.

let s1 = "First Line\rSecond Line\nThird Line";
let s2 = s1.replace(/(\r\n|\r|\n)/g, "<br>");

console.log(s2);

First Line<br>Second Line<br>Third Line

• The regular expression /(\r\n|\r|\n)/g matches all types of line breaks (\r\n, \r, and \n).
• replace() then substitutes each match with a <br> tag.