javascript - Format string with line breaks into paragraphs - Stack Overflow

admin 管理员组

文章数量: 1086019

I'm using Contentful CMS to manage content and pulling in the content with their 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:

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:

<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>

I'm using Contentful CMS to manage content and pulling in the content with their 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:

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:

<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>

• javascript
• html
• json
• contentful

Share Improve this question Follow asked Apr 22, 2015 at 15:43 CaribouCodeCaribouCode 14.4k3333 gold badges111111 silver badges186186 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 13

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

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].
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.

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:

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.

本文标签： javascriptFormat string with line breaks into paragraphsStack Overflow