将换行符格式化为段落

I'm using Contentful CMS to manage content and pulling in the content with their API.

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

The content get pulled in as a json object. One of the keys in the object is for the main block of text for the entry I am pulling. The string has no actual code in it, but it does have line breaks. In Chrome console these appear as a small return arrow. Part of the object looks like this:

内容作为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."
}

Notice the line breaks within the content field. How do I take article.content and format these paragraphs into actual <p> tags? I want to render HTML like so:

注意内容字段中的换行符。如何将article.content和格式设置为实际的

标签?我想像这样呈现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>

1 个解决方案

#1

The easiest way is to split on \n and then to rejoin on </p><p>:

最简单的方法是拆分\ n然后重新加入

:

1. split: Split takes a string and breaks it apart by another string, so for example if we have the string 1,2,3,4 and split on ,, we will end up with a javascript array like [1, 2, 3, 4].

split:Split接受一个字符串并用另一个字符串将它分开,所以例如如果我们有字符串1,2,3,4并且拆分,我们最终会得到一个像[1,2,3, 4]。

2. rejoin: Join takes a javascript array, and glues it back together into a string using another string as the glue. For example, if we take that array we have [1, 2, 3, 4] and join on #, we will end up with a string like 1#2#3#4.

rejoin:Join接受一个javascript数组,并使用另一个字符串作为粘合剂将它重新粘合到一个字符串中。例如,如果我们采用该数组,我们有[1,2,3,4]并加入#,我们将得到一个像1#2#3#4这样的字符串。

So following these steps but swapping out , for \n and # for </p><p> we are able to make a string like 1</p><p>2</p><p>3</p><p>4. This is almost right, notice that we don't have the starting <p> or the ending </p> so we just throw those on the beginning and end of the string:

因此,按照这些步骤进行交换,对于\ n和#为

,我们可以创建一个类似1的字符串

2

3

4。这几乎是正确的,请注意我们没有起始

或结束 所以我们只是把它们放在字符串的开头和结尾:

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

Check out this jsbin example. The top box is the input, the bottom is the output.

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