将换行符格式化为段落

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}上有字符串1,2,3,4和拆分我们最终会得到一个像,这样的javascript数组。
2. 重新加入：加入一个javascript数组，并使用另一个字符串作为粘合剂将其粘合回一个字符串。例如，如果我们在[1, 2, 3, 4]上使用该数组[1, 2, 3, 4]和加入，我们最终会得到一个类似#的字符串。

因此，按照这些步骤，但为1#2#3#4替换,，为\n换取#，我们可以创建一个类似</p><p>的字符串。这几乎正确，请注意我们没有起始1</p><p>2</p><p>3</p><p>4或结尾<p>所以我们只是将它们放在字符串的开头和结尾：

</p>

结帐this jsbin example。顶部框是输入，底部是输出。