How can I replace newlines with spaces in JavaScript?

Front End Technology Javascript Web Development

This tutorial teaches us to replace newlines with spaces in JavaScript. Often, programmers find unusual line breaks in the string, and the random line breaks look weird when we render them on the webpage using JavaScript.

So, the solution is that programmers just need to remove the line breaks and join the string with the space or other characters. Here, we have different approaches to solving this problem, and we will use the regular expression with the replace() method to remove the unusual line breaks.

Using the replace() Method
Using the split() and join() Methods

Using the replace() Method

In this approach, we will use the JavaScript built-in method to replace the character of the string.

We will create a regular expression for line breaks and replace all occurrences of line breaks with the space character.
The replace() method takes two parameters. First is the old character which needs to be replaced and another is the new one which we will replace with the old one. Here, the old character is the line break and for that, we will pass the regular expression.

Syntax

string.replace(/(\r
|
|\r)/g,"");

Parameters

string − It is the input parameter. As this parameter, users will give an input string in which they need to replace line breaks.
/(\r
|
|\r)/g − It is the regular expression for the line breaks. Here, ‘\r
’ represent the line breaks in windows. ‘|’ represents the OR operation. ‘
’ represents the line break in the Linux system, and ‘\r’ represent the line break in Mac OS. At the last, ‘/g’ represent the all occurrence of the line break.

Example 1

In the below example, we have used the replace() method to remove newlines from the string and replace it with the space.

<!DOCTYPE html>
<html>
<body>
   <h2>String replace() method- replacing new lines with the spaces</h2>
   <p>Original String: "
Welcome 
to \rthe 
\rtutorials point."</p>
   <p> String after replacing new lines with space: </p>
   <p id="replacedString"></p>
   <script>
      let replacedString = document.getElementById("replacedString");
      let originalString = " 
Welcome 
to \rthe 
\rtutorials point. ";
      // replacing line breaks with spaces using regular expression.
      let outputString = originalString.replace(/(\r
|
|\r)/g, " ");
      replacedString.innerHTML = outputString;
   </script>
</body>
</html>

In the above output, users can observe that we have removed all line breaks and string looks continue.

Using the split() and join() Methods

In this approach, we will use the split() and join() method to replace the new lines with the space. The split() and join() is the built-in method of the string library in JavaScript

To achieve our goal, we need to split the string from all line-break and join it again using the single space character.

Users can follow the below syntax to use the split() and join() methods

Syntax

let outputString = originalString.split( '
' );
let result = outputString.join(' ');

Parameters

originalString − It is the string input in which we need to replace the newlines with the space.

Example 2

The example below demonstrates the split() and join() methods to replace all line breaks with space. We will break strings from ‘
’ and store all broken strings in a single variable. After that, we will join broken strings using the join() method, giving us the desired output.

<!DOCTYPE html>
<html>
<body>
   <h2>Replacing new lines with the spaces in javascript</h2>
   <p> Original string: </p>
   <p>" 
One 
of 
the 
best 
computer 
science 
portal 
is the 
tutorials point. " </p>
   <p> String after replacing the line breaks: </p>
   <p id="replacedString"></p>
   <script type="text/javascript">
      let replacedString = document.getElementById("replacedString");
      let originalString = " 
One 
of 
the 
best 
computer 
science 
portal 
is the 
tutorials point. ";
      let splitString = originalString.split('
');
      joinString = splitString.join(' ');
      replacedString.innerHTML = joinString;
   </script>
</body>
</html>

Users can observe the above output and check that we have successfully replaced all occurrences of the line break with space.

Conclusion

We have learned the two most popular methods to replace the newlines with space in this tutorial. In the first approach, we have used the regular expression for the line breaks and replace method. However, users can also achieve the goal using the repalceAll() method, and users don’t need to use the ‘/g’ flag in the regular expression of line breaks.

In the second approach, users can also use the split() and join() method in a single line without storing the values of the split() method in an extra variable.