Javascript: Include empty lines when splitting strings

Question

Edit: This is the code where I will apply the split:

A have a code snippet surrounded inside pre tags

<pre class="codeSample">
public class Foo 
{
}

public class Bar
{
}
</pre>

and here is my jquery code:

var content = $('.codeSample').html();
$('codeSample').html('');  //Clear to ready for new output
var preTag = $('.codeSample');
var lines = content.split('\n');

for(i=0;i<lines.length;i++)
   preTag.append('<div>' + lines[i] + '</div>');

The output is this when rendered by the browser:

public class Foo 
{
}
public class Bar
{
}

The extra empty line between the two classes is gone.

Edit:

Right now, the following is my solution to fix this:

var content = $('.codeSample').html().replace(/\n(?=\n)/g, '\n ');

This code looks for two consecutive \n and inserts a blank space between them. Now when I do the split, empty lines are included in the array result but they contain a blank space in them. Any alternatives? Thanks.

Edit:

Okay, I will just consider my own solution. Thanks for the replies.

The output contains the extra blank line, as desired, if I do alert(output) at the end of your code. (\n is counted as new line in that case, unlike in HTML.) I also initialized at the beginning with output=""; On another note, best practice with arrays is to iterate with a for loop. — bbg
– bbg, Commented Dec 7, 2011 at 2:19
From the input string above, I am expecting four lines after the split, 'Line1', 'Line2', '\n', and 'Line3', but after the split, the result array only contains 'Line1', 'Line2', 'Line3'. — Randal Cunanan
– Randal Cunanan, Commented Dec 7, 2011 at 2:24
That code works for me. "Line1\nLine2\n\nLine3".split("\n") produces an array with four elements, the third of which is an empty string. lines.length is 4. What are you actually doing with output? (I assume your code is a cut-down example from a more complicated function, because splitting the string only to join it back up with the same separator is pointless.) @david - this question is different to the "duplicate" you linked to. — nnnnnn
– nnnnnn, Commented Dec 7, 2011 at 2:34

Xavura · Accepted Answer · 2011-12-07 02:53:33Z

1

The result of the split is ['Line1', 'Line2', '', 'Line3']. Notice the empty string? That's where your extra newline was.

You need to turn the empty strings into newlines.

See: http://jsfiddle.net/Xavura/hKsTj/#run

So you want to do something like this:

lines = lines.map(function(i) { return (i === '') ? '\n' : i; });

edited Dec 7, 2011 at 2:53

answered Dec 7, 2011 at 2:29

Xavura

1642 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

nnnnnn Over a year ago

Why change empty strings to newlines? The for loop in the question is already appending a newline after each array item and should work as is.

Xavura Over a year ago

Yes, of course it is. Because from what I can tell, that's what he wants to do.

nnnnnn Over a year ago

But if you run your map function on lines and then run the for loop from the question then output will be "Line1\nLine2\n\n\nLine3\n" - i.e., three newline characters in a row after Line2. That's not what is asked for, though there must be more going on than stated in the question or the original code would just work...

Xavura Over a year ago

You're right, based on what he's posted it is doing exactly what he wants. This is why you don't decide to hop on SO at 4AM.

Michaeldcooney · Accepted Answer · 2011-12-07 02:13:04Z

0

If you are output is HTML, then a line break would be treated as whitespace which wouldn't show up, if you want a line break in HTML you use the <br /> tag.

answered Dec 7, 2011 at 2:13

Michaeldcooney

1,44510 silver badges15 bronze badges

2 Comments

Ry- Over a year ago

If the output were HTML, they wouldn't be showing up as breaks in the first place, would they?

Randal Cunanan Over a year ago

My input string is not in html format, I need to retain the newlines('\n') from the input and include them as empty strings in the output array of split method. For example, the result of the split should be something like: 'Line1', 'Line2', '', 'Line3'

Martin · Accepted Answer · 2011-12-07 05:33:08Z

0

With your edit, the problem is now only that an empty <div> tag takes up no vertical space.

This can be fixed by setting a minimum height for code lines in your stylesheet:

.codeSample div {
    min-height: 1em;
}

edited Dec 7, 2011 at 5:33

answered Dec 7, 2011 at 2:30

Martin

38.5k15 gold badges75 silver badges83 bronze badges

Collectives™ on Stack Overflow

Javascript: Include empty lines when splitting strings

3 Answers 3

4 Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Related