Javascript：分割字串时请加入空白行

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.

Answer 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; });

Answer 2

如果输出的是HTML，则将换行符视为不会显示的空格，如果要在HTML中换行，请使用<br />标记。

Answer 3

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;
}