5

我正在使用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>
4

1 回答 1

12

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

  1. split：Split 接受一个字符串并用另一个字符串将其分开，例如，如果我们有字符串1,2,3,4并在 上拆分,，我们最终会得到一个 javascript 数组，如[1, 2, 3, 4].
  2. rejoin：Join 接受一个 javascript 数组，并使用另一个字符串作为胶水将其重新组合成一个字符串。例如，如果我们使用我们拥有的数组[1, 2, 3, 4]并加入on #，我们将得到一个类似的字符串1#2#3#4。

因此，按照这些步骤，但换掉和,for我们可以制作一个类似. 这几乎是对的，请注意我们没有开头或结尾，所以我们只是将它们放在字符串的开头和结尾：\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 示例。上框是输入，下框是输出。

于 2015-04-22T15:46:56.930 回答