How to remove all line breaks from a string using JavaScript?

Line breaks in strings vary from platform to platform, but the most common ones are the following:

  • Windows: \r\n carriage return followed by newline character.
  • Linux: \n just a newline character.
  • Older Macs: \r just a carriage return character.

There are two methods to accomplish this task. One of the ways is by using traditional programming loop and visiting every character one at a time. Another is using Regular Expressions.

The slice and stitch method: It is the basic way to realize the solution to this problem. Visit each character of the string and slice them in such a way that it removes the newline and carriage return characters.



Code snippet:

filter_none

edit
close

play_arrow

link
brightness_4
code

var newstr = "";
for( var i = 0; i < str.length; i++ ) 
    if( !(str[i] == '\n' || str[i] == '\r') )
        newstr += str[i];

chevron_right


All this code snippet does it just copy all the characters that are not “newline” or “carriage return” to another variable. However, there are a lot of overheads in this solution and therefore not an optimal way to remove newlines.

Regular Expression: This method uses regular expressions to detect and replace newlines in the string. It is fed into replace function along with string to replace with, which in our case is an empty string.

String.replace( regex / substr, replace with )

The regular expression to cover all types of newlines is

/\r\n|\n|\r/gm

As you can see that this regex has covered all cases separated by | operator. This can be reduced to

/[\r\n]+/gm

where g and m are for global and multiline flags.

Code snippet:

filter_none

edit
close

play_arrow

link
brightness_4
code

function remove_linebreaks( var str ) {
    return str.replace( /[\r\n]+/gm, "" );
}

chevron_right


The best part is that this method performed almost 10 times better than the previous one.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Remove all line breaks from
        a string using JavaScript
    </title>
      
    <script>
    // Method 1
      
    // Slice and Stitch
    function remove_linebreaks_ss( str ) {
        var newstr = "";
          
        for( var i = 0; i < str.length; i++ ) 
            if( !(str[i] == '\n' || str[i] == '\r') )
                    newstr += str[i];
                      
        return newstr;
    
      
    // Method 2
      
    // Regular Expression
    function remove_linebreaks( str ) {
        return str.replace( /[\r\n]+/gm, "" );
    }
      
    function removeNewLines() {
        var sample_str =
            document.getElementById('raw-text').value;
          
        console.time(); 
          
        // For printing time taken on console.
        document.getElementById('res-1').innerHTML
                = remove_linebreaks_ss( sample_str );
        console.timeEnd();
          
        console.time();
        document.getElementById('res-2').innerHTML
                = remove_linebreaks( sample_str);
        console.timeEnd();
    }
    </script>
</head>
  
<body>
    <center>
        <textarea id="raw-text"></textarea>
        <br>
      
        <button onclick="removeNewLines()">
            Remove Newlines
        </button>
      
        <h6>Method 1:</h6>
        <p id='res-1'></p>
      
        <h6>Method 2:</h6>
        <p id='res-2'></p>
    </center>
</body>
  
</html>                

chevron_right


Output:

  • Before Clicking on the button:
  • After Clicking on the button:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.