将带有换行符的字符串格式化为段落

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

最简单的方法是在\n 上split，然后在</p><p> 上重新加入：

1. split：Split 接受一个字符串并用另一个字符串将其分开，例如，如果我们有字符串1,2,3,4 和, 上的 split，我们将结束使用像 [1, 2, 3, 4] 这样的 JavaScript 数组。
2. rejoin：Join 接受一个 javascript 数组，并使用另一个字符串作为粘合剂将其重新组合成一个字符串。例如，如果我们使用[1, 2, 3, 4] 和# 上的join 数组，我们将得到一个类似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>';

查看this jsbin example。上框是输入，下框是输出。