将换行符格式化为段落

Question

我正在使用Contentful CMS来管理内容并使用其API来提取内容.

内容作为json对象被拉入.对象中的一个键是我要拉的条目的主要文本块.该字符串中没有实际代码,但它确实有换行符.在Chrome控制台中,这些显示为一个小的返回箭头.该对象的一部分如下所示:

var article = {
  name: "Some name here",
  content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis libero lacus. Morbi non elit purus. Mauris eu dictum urna. Nam vulputate venenatis diam nec feugiat. Praesent dapibus viverra ullamcorper. Donec euismod purus vitae risus dignissim, id pulvinar enim tristique. Donec sed justo justo. Sed et ornare lacus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis libero lacus. Morbi non elit purus. Mauris eu dictum urna. Nam vulputate venenatis diam nec feugiat. Praesent dapibus viverra ullamcorper. Donec euismod purus vitae risus dignissim, id pulvinar enim tristique. Donec sed justo justo. Sed et ornare lacus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis libero lacus. Morbi non elit purus. Mauris eu dictum urna. Nam vulputate venenatis diam nec feugiat. Praesent dapibus viverra ullamcorper. Donec euismod purus vitae risus dignissim, id pulvinar enim tristique. Donec sed justo justo. Sed et ornare lacus."
}

注意内容字段中的换行符.如何将article.content这些段落格式化为实际<p>标签？我想像这样呈现HTML:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis libero lacus. Morbi non elit purus. Mauris eu dictum urna. Nam vulputate venenatis diam nec feugiat. Praesent dapibus viverra ullamcorper. Donec euismod purus vitae risus dignissim, id pulvinar enim tristique. Donec sed justo justo. Sed et ornare lacus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis libero lacus. Morbi non elit purus. Mauris eu dictum urna. Nam vulputate venenatis diam nec feugiat. Praesent dapibus viverra ullamcorper. Donec euismod purus vitae risus dignissim, id pulvinar enim tristique. Donec sed justo justo. Sed et ornare lacus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis libero lacus. Morbi non elit purus. Mauris eu dictum urna. Nam vulputate venenatis diam nec feugiat. Praesent dapibus viverra ullamcorper. Donec euismod purus vitae risus dignissim, id pulvinar enim tristique. Donec sed justo justo. Sed et ornare lacus.</p>

Answer 1

最简单的方法是split开启\n然后重新加入</p><p>:

1. 拆分:拆分将一个字符串的另一个字符串除了打破它,因此,例如,如果我们有字符串1,2,3,4和分裂上,,我们将结束与JavaScript数组一样[1, 2, 3, 4].
2. rejoin:Join接受一个javascript数组,然后使用另一个字符串作为粘合剂将它重新粘合到一个字符串中.例如,如果我们把这个数组我们[1, 2, 3, 4]和加盟上#,我们将最终像一个字符串1#2#3#4.

因此,按照这些步骤,但换出,的\n和#为</p><p>我们能够作出这样的字符串1</p><p>2</p><p>3</p><p>4.这几乎是正确的,请注意我们没有开头<p>或结尾</p>所以我们只是把它们放在字符串的开头和结尾:

var paragraphs = '<p>' + article.content.split("\n").join('</p><p>') + '</p>';

看看这个jsbin示例.顶部框是输入,底部是输出.