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

Question

我正在使用 Contentful CMS 来管理内容并使用他们的 API 拉入内容。

内容作为 json 对象被拉入。对象中的一个键用于我正在拉取的条目的主要文本块。该字符串中没有实际代码，但确实有换行符。在 Chrome 控制台中，这些显示为一个小 return 箭头。部分对象如下所示：

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 在 , 上，我们最终会得到一个 javascript 数组，例如 [1, 2, 3, 4].
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 这样的字符串。这是 almost 对，请注意我们没有起始 <p> 或结尾 </p> 所以我们只是将它们放在字符串的开头和结尾:

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

查看 this jsbin example。顶部框是输入，底部是输出。