How to replace line breaks with
using JavaScript?

Front End Technology Javascript Web Development

In this tutorial, we are going to learn how to replace all the line breaks in JavaScript code using a   tag. There are various methods using which we can replace all the line breaks with   tag. Some of the methods are given below −

Using String replace() Method and RegEx

In this method we are using the String.replace() method to replace all the line breaks in the plain text with the tag. Here the RegEx refers to the regular expression that we write inside the string.replace() method.

Syntax

Following is the syntax to use replace() method −

sentence.replace(/(?:\r
|\r|
)/g, "<br>");

Here sentence is the string with line breaks and the first argument of the replace() method is a regular expression.

Algorithm

Step 1 − Define a string with line breaks and display it.
Step 2 − Apply replace() method on the above-defined string. Use the above syntax to apply to replace method.
Step 3 − Display the string obtained in step 2. All line breaks are replaced by .

Example

We can use the below-given code to replace all the line breaks with tag using RegEx.

<!DOCTYPE html>
<html>
<body>
   <p id="br"></p>
   <button onClick="linebreak()">Replace</button>
   <script>
      let sentence = `Javascript is a dynamic computer
      programming language for web.
      Javascript can update and change both HTML and CSS`;
      let br = document.getElementById("br");
      br.innerHTML = sentence;
      function linebreak() {

         // Replace the line break with <br>
         sentence = sentence.replace(/(?:\r
|\r|
)/g, "<br>");

         // Update the value of paragraph
         br.innerHTML = sentence;
      }
   </script>
</body>
</html>

In the above code the string.replace() method checks all the 3 kinds of line breaks i.e., \r
,
and \r, and the string appearance using the \g tag and then replaces them with the tag.

Using split() and join() Methods

In this method, the string is split using the delimiter and returns an array of substrings which are then combined to form an array and pass so that every joining contains the .

Syntax

Following is the syntax to apply split() and join() methods −

sentence.split("
").join("<br />");

Here sentence is the string with line breaks (
) that we want to replace with .

Algorithm

Step 1 − Define a string with line breaks and display it.
Step 2 − Apply split() and join() methods on the above-defined string. Use the above syntax to apply to replace method.
Step 3 − Display the string obtained in step 2. All line breaks are replaced by .

Example

We can use the below given code to replace all the line breaks with tag using split and join method

<!DOCTYPE html>
<html>
<body>
   <p id="br"></p>
   <button onClick="linebreak()">Change</button>
   <script>
      let sentence = `Javascript is a dynamic computer
      programming language for web.
      Javascript can update and change both HTML and CSS`;
      let br = document.getElementById("br");
      br.innerHTML = sentence;
      function linebreak() {

         // Replace the line break with <br>
         sentence = sentence.split("
").join("<br />");

         // Update the value of paragraph
         br.innerHTML = sentence;
      }
   </script>
</body>
</html>

In the above code the built_in methods are used to replace line strings with the br tag string.split() method is used to split the string with the delimiter and then the join() method is used to join the split subarrays and form an array.