Format a line with line breaks in paragraphs

Question

I use Contentful CMS to manage content and pull content using my API.

Content is pulled in as a json object. One of the keys in the object is the main block of text for input, which I draw. A line does not have any valid code in it, but it does have line breaks. In the Chrome console, they appear as a small return arrow. Part of the object is as follows:

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." } 

Pay attention to line breaks in the content field. How to take article.content and format these paragraphs into actual <p> tags? I want to make HTML as follows:

 <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

The easiest way is to split to \n and then go back to </p><p> :

• split : Split takes a line and splits it into another line, so for example, if we have a line 1,2,3,4 and split on ,, we end up with a javascript array like [1, 2, 3, 4] .
• rejoin : the union takes a javascript array and glues it back into a string using another string as glue. For example, if we take this array, we have [1, 2, 3, 4] and join on # , we get a string like 1#2#3#4 .

So, following these steps, but replacing \n and # with </p><p> , we can make a line like 1</p><p>2</p><p>3</p><p>4 . This is almost correct, note that we don’t have a start <p> or end </p> , so we just throw them at the beginning and end of the line:

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

Check out this jsbin example . The top box is the entrance, the bottom is the exit.