Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How can I replace newlines with spaces in JavaScript?
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.
3K+ Views
