Open In App

How to replace line breaks with br tag using JavaScript ?

Last Updated : 30 Jan, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

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

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

Replace line breaks with br tag



Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads