Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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 strings, and random line breaks look weird when rendered on webpages using JavaScript.
The solution is to remove line breaks and join the string with spaces or other characters. We have different approaches to solve this problem using regular expressions with the replace() method or string manipulation methods.
-
Using the replace() Method
-
Using the split() and join() Methods
Using the replace() Method
In this approach, we use the JavaScript built-in replace() method with regular expressions to handle all types of newline characters across different operating systems.
-
We create a regular expression for line breaks and replace all occurrences with space characters.
-
The replace() method takes two parameters: the pattern to match (old character) and the replacement string (new character).
Syntax
string.replace(/(\r<br>|<br>|\r)/g, " ");
Parameters
-
string ? The input string containing newlines to be replaced.
-
/(\r
|
|\r)/g ? Regular expression matching all newline types:\r(Windows),\r(old Mac). Thegflag ensures global replacement.
Example 1
In the example below, we use the replace() method to remove newlines from a string and replace them with spaces.
<!DOCTYPE html>
<html>
<body>
<h2>String replace() method - replacing new lines with spaces</h2>
<p>Original String: "\nWelcome \nto \rthe <br>\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 <br>\rtutorials point. ";
// replacing line breaks with spaces using regular expression
let outputString = originalString.replace(/(\r<br>|<br>|\r)/g, " ");
replacedString.innerHTML = outputString;
</script>
</body>
</html>
Welcome to the tutorials point.
Using the split() and join() Methods
In this approach, we use the split() and join() methods to replace newlines with spaces. This method is simpler but handles only one type of newline character at a time.
Syntax
let splitArray = originalString.split('<br>');
let result = splitArray.join(' ');
Parameters
-
originalString ? The input string containing newlines to be replaced.
-
'
' ? The delimiter to split on (newline character). -
' ' ? The string to join with (space character).
Example 2
The example below demonstrates using split() and join() methods to replace line breaks with spaces.
<!DOCTYPE html>
<html>
<body>
<h2>Replacing new lines with spaces in JavaScript</h2>
<p>Original string:</p>
<p>" \nOne \nof \nthe \nbest \ncomputer \nscience \nportal \nis \ntutorials point. "</p>
<p>String after replacing line breaks:</p>
<p id="replacedString"></p>
<script>
let replacedString = document.getElementById("replacedString");
let originalString = " \nOne \nof \nthe \nbest \ncomputer \nscience \nportal \nis \ntutorials point. ";
let splitString = originalString.split('<br>');
let joinString = splitString.join(' ');
replacedString.innerHTML = joinString;
</script>
</body>
</html>
One of the best computer science portal is tutorials point.
Comparison
| Method | Cross-platform | Performance | Use Case |
|---|---|---|---|
replace() with regex |
Yes | Good | Handles all newline types |
split() + join()
|
No | Faster | Simple, single newline type |
Conclusion
Use replace() with regex for cross-platform compatibility, handling all newline types. The split() and join() approach is simpler but only handles one newline character type at a time.
5K+ Views
