Split string with commas to new line

Question

I have a string like

This is great day, tomorrow is a better day, the day after is a better day, the day after the day after that is the greatest day

I wanted to basically split this one long string at the commas and insert a new line so it becomes

This is great day
tomorrow is a better day
the day after is a better day
the day after the day after that is the greatest day

How can I do that ?

Please give me suggestion how to break line after every 5 comma in string. — Rushik, Apr 11 '19 at 06:13

Benjamin Gruenbaum · Accepted Answer · 2013-03-13T02:37:50.967

43

With the built in split and join methods

var formattedString = yourString.split(",").join("\n")

If you'd like the newlines to be HTML line breaks that would be

var formattedString = yourString.split(",").join("<br />")

This makes the most sense to me since you're splitting it into lines and then joining them with the newline character.

Although I think speed is less important than readability in most cases, I was curious about it in this case so I've written a quick a benchmark.

It seems that (in chrome) using str.split(",").join("\n") is faster than str.replace(/,/g, '\n'); .

edited Mar 13 '13 at 02:37

answered Mar 13 '13 at 02:20

Benjamin Gruenbaum

270,886
87
504
504

awesome thanks - so doing this in html is just something like `yourString.split(",").join("
")` – Andy Mar 13 '13 at 02:27
`string.replace(',', '\n')` only replaces the first comma with a newline. – Blender Mar 13 '13 at 02:36
@Blender That is correct! I guess I never used replace without a regexp. Was curios when I saw it as an answer, thanks, I'll update the perf – Benjamin Gruenbaum Mar 13 '13 at 02:37

score 5 · Answer 2 · answered Mar 13 '13 at 02:21

5

You could also replace them:

string.replace(/,/g, '\n');

answered Mar 13 '13 at 02:21

Blender

289,723
53
439
496

score 1 · Answer 3 · answered Apr 12 '18 at 20:27

1

<p id="errorMessage">Click | the |button |to |display| the| array| values| 
after| the| split.</p>

$(document).ready(function () {
var str = $("#errorMessage").text();
document.getElementById("errorMessage").innerHTML=str.split("|").join(" 
</br>"); }

answered Apr 12 '18 at 20:27

MADHUR GUPTA

1,014
10
14

Don't just blurt out code! Adding some text to describe how this best answers the question will improve the long-term value of the answer and help to prevent it from being deleted during review. Also, it may not be obvious to all readers how this solves the problem being that the split character provided by the OP was `,` rather than `|`. – NightOwl888 Apr 13 '18 at 03:53

score 0 · Answer 4 · answered Mar 13 '13 at 02:21

> a = 'This is great day, tomorrow is a better day, the day after is a better day, the day after the day after that is the greatest day'
> b = a.split(', ').join('\n')

"This is great day
tomorrow is a better day
the day after is a better day
the day after the day after that is the greatest day"

score 0 · Answer 5 · answered Mar 13 '13 at 02:22

You can use .split() to create an array of all the parts of the string...

var str = 'This is great day, tomorrow is a better day, the day after is a better day, the day after the day after that is the greatest day';

str.split(',');
  -> ["This is great day", " tomorrow is a better day", " the day after is a better day", " the day after the day after that is the greatest day"]

Now, you can do whatever you want with the different parts. Since you want to join with a new line, you can use .join() to put it back together...

str.split(',').join('\n');
  -> "This is great day
      tomorrow is a better day
      the day after is a better day
      the day after the day after that is the greatest day"

score 0 · Answer 6 · answered Aug 04 '21 at 07:12

TermsAndConditions = "Right to make changes to the agreement.,Copyright and intellectual property.,Governing law.,Warrantaay disclaimer.,Limitation of liability."

const TAndCList = this.invoiceTermsAndConditions.split(",").join("\n \n• ");

Output :

• Right to make changes to the agreement.
• Copyright and intellectual property.
• Governing law.
• Warrantaay disclaimer.
• Limitation of liability.

score 0 · Answer 7 · answered May 24 '23 at 09:22

I will suggest split the array on commas and then use the for loop. below code snippet is for vue.js

             <div 
             v-for="(arrayElement) in Array"
             :key="`Array-${arrayElement.id}`"
             class="column">
                {{ arrayElement.name }}
             </div>

score -1 · Answer 8 · answered Mar 13 '13 at 02:23

-1

Without testing on my browser try:

var MyStr="This is great day, tomorrow is a better day, the day after is a better day, the day after the day after that is the greatest day";
Var splitedStr = MyStr.split(",");

var returnStr = '';
for (var i = 0; i < splitedStr.length; i++)
{
    returnStr += splitedStr[i] + '<br />';
}

document.write(returnStr);

answered Mar 13 '13 at 02:23

AkisC

817
2
12
27

`document.write` is not safe anymore – Bitfinicon Oct 01 '22 at 11:23

Split string with commas to new line

8 Answers8

Linked