

- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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\n|\n|\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\n|\n|\r)/g − It is the regular expression for the line breaks. Here, ‘\r\n’ represent the line breaks in windows. ‘|’ represents the OR operation. ‘\n’ 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: "\nWelcome \nto \rthe \n\rtutorials point."</p> <p> String after replacing new lines with space: </p> <p id="replacedString"></p> <script> let replacedString = document.getElementById("replacedString"); let originalString = " \nWelcome \nto \rthe \n\rtutorials point. "; // replacing line breaks with spaces using regular expression. let outputString = originalString.replace(/(\r\n|\n|\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( '\n' ); 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 ‘\n’ 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>" \nOne \nof \nthe \nbest \ncomputer \nscience \nportal \nis the \ntutorials 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 = " \nOne \nof \nthe \nbest \ncomputer \nscience \nportal \nis the \ntutorials point. "; let splitString = originalString.split('\n'); 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.
- Related Questions & Answers
- How do i match just spaces and newlines with Python regex?
- How to replace leading zero with spaces - JavaScript
- Capitalize a word and replace spaces with underscore - JavaScript?
- How can I fill out a Python string with spaces?
- How to strip spaces/tabs/newlines using Python regular expression?
- How i can replace number with string using Python?
- How I can replace a JavaScript alert pop up with a fancy alert box?
- How to replace multiple spaces with a single space in C#?
- How can I use MySQL replace() to replace strings in multiple records?
- How can I replace & with an ampersand in my MySQL database?
- How to check if text is “empty” (spaces, tabs, newlines) in Python?
- MySQL: How can I find a value with special character and replace with NULL?
- Replacing spaces with underscores in JavaScript?
- How can I save HTML locally with JavaScript?
- How can I delete all cookies with JavaScript?