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);
let s1 = "Hello\nWorld!\nWelcome to JavaScript.";let s2 = s1.replace(/\n/g, "<br>");console.log(s2);Output
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);
let s1 = "Line 1\nLine 2\nLine 3";let s2 = s1.split("\n").join("<br>");console.log(s2);Output
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);
let s1 = "Line 1\r\nLine 2\nLine 3";let s2 = s1.replace(/(\r\n|\n)/g, "<br>");console.log(s2);Output
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);
let s1 = "Line 1\nLine 2\nLine 3";let s2 = s1.split("\n").map(line => line.trim()).join("<br>");console.log(s2);Output
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);
let s1 = "First Line\rSecond Line\nThird Line";let s2 = s1.replace(/(\r\n|\r|\n)/g, "<br>");console.log(s2);Output
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.
