4 Ways To Remove Line Breaks In Javascript

Welcome to a quick tutorial on how to remove line breaks in Javascript. Want to remove all line breaks and create a “flat string” in Javascript? There are actually a few ways to do it:

  1. STRING.replace(/\r?\n|\r/, "");
  2. STRING.replaceAll("\r", "").replaceAll("\n", "");
  3. To remove HTML line breaks – STRING.replaceAll("<br>", "").replaceAll("<br/>", "");
  4. To remove only leading and trailing line breaks – STRING.trim();

That should cover the basics, but if you need more concrete examples – Read on!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TLDR – QUICK SLIDES

[web_stories_embed url=”https://code-boxx.com/web-stories/how-to-remove-line-breaks-in-javascript/” title=”How to Remove Line Breaks In Javascript” poster=”https://code-boxx.com/wp-content/uploads/2023/02/STORY-JS-R4.webp” width=”360″ height=”600″ align=”center”]

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

REMOVE LINE BREAKS

All right, let us now get into the examples of removing line breaks in Javascript.

 

1) REGULAR EXPRESSION

1-regex.html
 // (A) THE STRING
var str = "Foo\r\nGoo\r\nBar";
console.log(str);
 
// (B) STRIP FIRST LINE BREAK
var nobreak = str.replace(/\r?\n|\r/, "");
console.log(nobreak); // FooGoo\r\nBar
 
// (C) STRIP ALL LINE BREAKS
var nobreak = str.replace(/\r?\n|\r/g, "");
console.log(nobreak); // FooGooBar

This is probably the most common method that everyone on the Internet is recommending – Myself included. Regular expressions is a big can of worms, so I will just leave replace(/\r?\n|\r/, "") as “the ways to remove all line breaks”.

 

2) REPLACE

2-replace.html
 // (A) THE STRING
var str = "Foo\r\nGoo\r\nBar";
console.log(str);

// (B) STRIP ALL LINE BREAKS
var nobreak = str.replaceAll("\r", "").replaceAll("\n", "");
console.log(nobreak); // FooGooBar

This is an alternate way to strip line breaks – By replacing all \r and \n with an empty string.

 

 

3) REMOVE HTML LINE BREAKS

3-br.html
 // (A) THE STRING
var str = "Foo<br>Goo<br>Bar";
console.log(str);

// (B) STRIP ALL LINE BREAKS
var nobreak = str.replaceAll("<br>", "").replaceAll("<br/>", "");
console.log(nobreak); // FooGooBar 

Captain Obvious to the rescue! Line breaks in HTML are added with the <br> (or some people may prefer <br/>) tag. We just remove them using the same old replaceAll() method.

 

4) TRIM

4-trim
 // (A) THE STRING
var str = "\r\nFoo\r\nGoo\r\n";
console.log(str);
 
// (B) STRIP LEADING & TRAILING LINE BREAKS
var nobreak = str.trim();
console.log(nobreak); // Foo\r\nGoo

If you just want to remove the line breaks from the start and end of the string – Just use trim() instead.

 

 

EXTRA BITS & LINKS

That’s all for the main tutorial, and here is a small section on some extras and links that may be useful to you.

 

EXTRA) MYSTERY OF LINE BREAKS

Some of you curious code ninjas may be wondering, what’s up with the \r\n?

  • \r Represents a carriage return (hex code 0D)
  • \n Represents a newline (hex code 0A)

Yep, both of them kind of represents the same “newline” or “line break”. Then comes the interesting part:

  • Linux uses \n.
  • Mac uses \r.
  • Windows uses \r\n.

No need to worry too much though. We code ninjas simply use both \r\n, and strip the both of them regardless.

 

LINKS & REFERENCES

 

INFOGRAPHIC CHEAT SHEET

Remove Line Breaks In Javascript (click to enlarge)

 

THE END

Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!