有效地将换行符转换为段落

Question

I'm trying to find a fail proof to convert the bad practice of using double line breaks into proper paragraphs. Here's what I have so far. I know normally you wouldn't do this via JS but this is just for personal use and for the sake of learning.

HTML:

<article>
<h1>Lorem ipsum</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus augue id viverra congue. Vestibulum mattis dui finibus pellentesque viverra. In hac habitasse platea dictumst.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus augue id viverra congue. Vestibulum mattis dui finibus pellentesque viverra. In hac habitasse platea dictumst.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum faucibus augue id viverra congue. Vestibulum mattis dui finibus pellentesque viverra. In hac habitasse platea dictumst.
<br><br>
</article>

JS:

$(function() {

    // for each article, split text by <br> and wrap paragraphs in <p>
    $('article').each(function() {
        var source = $(this).html();
        var paragraphs = source.split('<br>');
        var output = '';
        for (var i = 0, l = paragraphs.length; i < l; i++) {
            output += '<p>' + paragraphs[i] + '</p>';
        }

        // Put paragraphs back together as <p>, trim white spaces and remove resulting empty <p>
        $(this)
            .html(output)
            .addClass('Paragraphed')
            .find('p')
            .filter(function() {
                return $.trim(this.innerHTML) == ''
            }).remove();

    }); // end of each .RichText

});

So far I just split the paragraphs based on <br> tags, and then put it back as paragraphs. The problem is doing it this way skips paragraphs that are not completely wrapped by line breaks, in this example the first one, since its sibling is an <h1> .

Does anyone know a better way to approach this?

Here's a pen if you want to test the code live: http://codepen.io/Yogensia/pen/NjjGGR

Answer 1

Try this:

        $(function() {
    // wrap paragraphs in <p>
    $("article").each(function() {
        var source = $(this).html();
        var temp = source.split("</h1>");
        var source = temp[1];
        var paragraphs = source.split("<br><br>");
        var output = "";

        for (var i = 0, l = paragraphs.length - 1; i < l; i++) {
            output += "\n<p>" + paragraphs[i] + "</p>\n";
        }
        // add the heading
        output = temp[0] + "</h1>\n" + output;

        // display paragraphs
        $(this).html(output).addClass("Paragraphed");
    }); // end of each .RichText
});

See demo

Initially, source holds all the HTML content. Then, the script splits the content twice. The first split occurs on the closing h1 tag and the second involves the two br tags. The second element of temp , ie temp[1] holds the content that should display without break tags. Variable source then gets set to this value so that the script can use it to form paragraphs appropriately using opening and closing paragraph tags.

Note: When you adjust the paragraph length test by subtracting one to allow for zero-based indexing, then you only get the paragraphs you need and avoid having to remove an empty paragraph.