Question

我试图找到一个失败证明，将使用双重换行的不良做法转换为适当的段落。这是我到目前为止所拥有的。我知道通常你不会通过JS这样做，但这只是为了个人使用而且是为了学习。

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

});

到目前为止，我只是根据<br>标签拆分段落，然后将其作为段落放回去。问题是这样做会跳过没有完全被换行符包裹的段落，在本例中是第一段，因为它的兄弟是<h1>。

有没有人知道更好的方法来解决这个问题？

如果你想现场测试代码，请点击这里：http://codepen.io/Yogensia/pen/NjjGGR

Answer 1

试试这个：

        $(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
});

请参阅demo

最初，来源包含所有HTML内容。然后，脚本将内容拆分两次。第一次拆分发生在收盘 h1 标签上，第二次拆分涉及两个 br 标签。 temp 的第二个元素，即temp [1]保存应该显示没有break标记的内容。然后将变量源设置为此值，以便脚本可以使用它来使用开始和结束段落标记来适当地形成段落。

注意：当您通过减去一个以允许基于零的索引来调整段落长度测试时，您只能获得所需的段落并避免删除空段落。

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

1 个答案: