如何替换字符串中的换行符，使html将其呈现为单独的段落？

Question

我正在开发一个react应用程序，并使用firebase来存储我的数据。我对新台词有意见。当我向firebase提交一个包含多个段落的博客文章时，它会用隐藏的换行符存储字符串。我说“隐藏”是因为你不能仅仅通过在firebase控制台中看到它们就可以看到它们，但是我知道firebase存储了它们。问题是，当文本被读取回应用程序时，我不知道如何将文本显示为多个段落。换行符仍然存在，但是html不会在段落中断时呈现换行符。

下面是一个例子：

Lorem ipsum dolor同坐，敬而远之，不屈不挠地干着苦力和苦力。[医]黑穗病( nunc )南维弗拉，自由法院，劳雷席。[医]洛雷特氏病.[医]颈静脉窦扭转的结果。[医][[ Ac ]][[Ac]].不允许饮食的酒后堆积坐在一起。砂糖发酵酒。[医]前矢状弓状软骨。多萝尔坐在一起，像天使一样。Orci ac拍卖师，augue augue这是我们的宿命。妊娠期Sed _d_d_1_(1)。[医][1][1][1][1][1][1][1][1][1][1][1][1]。Lorem donec massa sapien faucibus et.我也坐着。文尼提斯港。[医][医][ Nisl ]‘.[医]乌贼叶乙素。[医][医]矢状体.在诱惑科莫多的超级灯笼中，有一处拉伤。小酒鬼坐在一起。[医]马耳苏阿达( Aliquam malesuada bibendum arcu vitae nunc curabitur vitae nunc. )在元素上的摩尔结构被认为是非常重要的。欧盟米比本斯奈克埃斯塔斯和奎斯克格斯塔斯在。Sed天鹅绒要领苏丹莱斯欧盟sem。[医]乌三里三叶草。Vel orci porta non neque laoreet suspendisse.Nunc faucibus a pellentesque同porttitor eget dolor.

这应该是两段。

我尝试对所有换行符实例进行查找/替换，用< br />替换它们，如下所示：

const regex = new RegExp('\\n', 'g');
p.body = p.body.replace(regex, '<br/>');

结果：

Lorem ipsum dolor同坐，敬而远之，不屈不挠地干着苦力和苦力。[医]黑穗病( nunc )南维弗拉，自由法院，劳雷席。[医]洛雷特氏病.[医]颈静脉窦扭转的结果。[医][[ Ac ]][[Ac]].不允许饮食的酒后堆积坐在一起。砂糖发酵酒。[医]前矢状弓状软骨。多萝尔坐在一起，像天使一样。Orci ac拍卖师，augue augue这是我们的宿命。妊娠期Sed _d_d_1_(1)。[医][1][1][1][1][1][1][1][1][1][1][1][1]。Lorem donec massa sapien faucibus et.我也坐着。文尼提斯港。[医][医][ Nisl ]‘.乌贼proin.< br />< br />Sollicitudin aliquam ultrices ullamcorper malesuada .在诱惑科莫多的超级灯笼中，有一处拉伤。小酒鬼坐在一起。[医]马耳苏阿达( Aliquam malesuada bibendum arcu vitae nunc curabitur vitae nunc. )在元素上的摩尔结构被认为是非常重要的。欧盟米比本斯奈克埃斯塔斯和奎斯克格斯塔斯在。Sed天鹅绒要领苏丹莱斯欧盟sem。[医]乌三里三叶草。Vel orci porta non neque laoreet suspendisse.Nunc faucibus a pellentesque同porttitor eget dolor.

你能看到proin和Sollicitudin之间的两个< br/ >吗？

很明显，它将文本呈现为-原样。

在文本中有什么字符可以代替\n，它会迫使html将那个位置的字符串拆分成一个新段落吗？谢谢。

Answer 1

通过使用\n作为分隔符拆分字符串，我最终解决了这个问题。这给了我一系列的段落。然后，我将数组转换为<p>...</p>对象的数组。下面是代码：

                    let paragraphCount = 0;
                    const paragraphArray = body.split('\n').filter(p => p !== '').map(p => {
                        paragraphCount++;
                        return <p>
                                {/* Add image to first paragraph */}
                                {paragraphCount === 1 ? <img src={imageUrl} className={imageClass} /> : null}
                                {p}
                            </p>;
                    });
                    const paragraphs = <div className="post-body">{paragraphArray}</div>;