How to replace line breaks with br tag using JavaScript ?
Last Updated :
30 Jan, 2024
In JavaScript, you can replace line breaks (\n or \r\n) with <br> tags in a string using different approaches. But before learning the approaches, let’s see an example.
Example:
Input: `Geeks for Geeks isÂ
a computer science portalÂ
where people study computer science`
Output: "Geeks for Geeks is <br> a computer science portal <br> where people study computer science"
To replace line breaks with br tags using JavaScript, we have the following methods :
Method 1: Using Regex
In this approach, we use the String.replace() method of regex to replace the new line with <br>. The String.replace() is an inbuilt method in JavaScript that is used to replace a part of the given string with another string or a regular expression. The original string will remain unchanged.
Example 1: This example shows the use of string.replace() method to replace the new line with <br>.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="para"></p>
<button onClick="myFunc()">Change</button>
<script>
let str = `Geeks for Geeks is
a computer science portal
where people study computer science`;
let para = document.getElementById("para");
para.innerHTML = str;
function myFunc() {
// Replace the \n with <br>
str = str.replace(/(?:\r\n|\r|\n)/g, "<br>");
// Update the value of paragraph
para.innerHTML = str;
}
</script>
</body>
</html>
|
Output:
Replace line breaks with br tag
Method 2: Using split() and join()
In this method, we split the string from the delimiter “\n” which returns an array of substrings, and then we join the Array using the join method and pass <br /> so that every joining contains <br />.
Example 2: In this example, we will use the javascript split() and join() method to replace the new line with <br>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="para"></p>
<button onClick="myFunc()">Change</button>
<script>
let str = `Geeks for Geeks is
a computer science portal
where people study computer science`;
let para = document.getElementById("para");
para.innerHTML = str;
function myFunc() {
// Replace the \n with <br>
str = str.split("\n").join("<br />");
// Update the value of paragraph
para.innerHTML = str;
}
</script>
</body>
</html>
|
Output:
Replace line breaks with br tag
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...