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

Last Updated : 06 Dec, 2024

Here are the different methods to replace line breaks with 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.

JavaScript

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, " ") replaces every line break with the 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 tags.

JavaScript

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(" ") joins the array elements back together, inserting 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.

JavaScript

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, " ") replaces both types of line breaks with 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 tags.

JavaScript

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(" ") reassembles the array with 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 tag, especially when dealing with multiline text from different operating systems.

JavaScript

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 tag.

JavaScript - How to Remove All Line Breaks From a String?

devi_johns

Improve

Article Tags :

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

1. Using replace() with Regular Expression

2. Using split() and join() Methods

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

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

5. Using replace() with Multiple Line Break Variants

Similar Reads

Thank You!

What kind of Experience do you want to share?