[英]Format string with line breaks into paragraphs
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.内容作为 json 对象被拉入。 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.
在 Chrome 控制台中,这些显示为一个小的返回箭头。 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?我如何将
article.content
并将这些段落格式化为实际的<p>
标签? I want to render HTML like so:我想像这样呈现 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>
The easiest way is to split
on \\n
and then to rejoin on </p><p>
:最简单的方法是在
\\n
上split
,然后在</p><p>
上重新加入:
1,2,3,4
and split on ,
, we will end up with a javascript array like [1, 2, 3, 4]
. 1,2,3,4
并在,
拆分,我们将最终得到一个 javascript 数组,如[1, 2, 3, 4]
。[1, 2, 3, 4]
and join on #
, we will end up with a string like 1#2#3#4
.[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
.所以按照这些步骤但是换出
,
对于\\n
和#
for </p><p>
我们可以创建一个像1</p><p>2</p><p>3</p><p>4
这样的字符串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:这几乎是正确的,注意我们没有开始的
<p>
或结束的</p>
所以我们只是把它们放在字符串的开头和结尾:
var paragraphs = '<p>' + article.content.split("\n").join('</p><p>') + '</p>';
Check out this jsbin example .查看这个 jsbin 示例。 The top box is the input, the bottom is the output.
顶部的框是输入,底部的框是输出。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.