如何替换字符串中的换行符，使 html 将其呈现为单独的段落？
How do I replace newline characters in a string such that html will render it as a separate paragraph?
我正在开发一个反应应用程序，我正在使用 firebase 来存储我的数据。我遇到换行问题。当我向 firebase 提交包含多个段落的博客 post 时，它会存储带有隐藏换行符的字符串。我说隐藏是因为你无法通过在 firebase 控制台中查看它们来看到它们，但我知道 firebase 确实存储了它们。问题是当文本读回应用程序时，我不确定如何将文本显示为多个段落。换行符仍然存在，但 html 不会将换行符呈现为段落分隔符。
这是一个例子：
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh tellus molestie nunc non blandit massa enim nec. Viverra nam libero justo laoreet sit. Laoreet id donec ultrices tincidunt. Tortor consequat id porta nibh venenatis cras sed felis. Ac feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper. Imperdiet dui accumsan sit amet. Scelerisque fermentum dui faucibus in ornare quam. Proin sagittis nisl rhoncus mattis rhoncus. Dolor sit amet consectetur adipiscing elit pellentesque. Orci ac auctor augue mauris augue. Id aliquet risus feugiat in. Sed id semper risus in hendrerit gravida. Euismod elementum nisi quis eleifend quam adipiscing vitae. Lorem donec massa sapien faucibus et. Mi sit amet mauris commodo. Porta nibh venenatis cras sed. Nisl purus in mollis nunc sed id. Pulvinar sapien et ligula ullamcorper malesuada proin. Sollicitudin aliquam ultrices sagittis orci. At tempor commodo ullamcorper a lacus. Tincidunt dui ut ornare lectus sit amet est placerat in. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc. Molestie at elementum eu facilisis sed odio morbi quis commodo. Eu mi bibendum neque egestas congue quisque egestas diam in. Sed velit dignissim sodales ut eu sem. Risus ultricies tristique nulla aliquet enim tortor at. Vel orci porta non pulvinar neque laoreet suspendisse. Nunc faucibus a pellentesque sit amet porttitor eget dolor.
这应该是两段。
我尝试对所有换行实例执行 find/replace 替换它们，如下所示：
const regex = new RegExp('\n', 'g');
p.body = p.body.replace(regex, '<br/>');
结果：
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh tellus molestie nunc non blandit massa enim nec. Viverra nam libero justo laoreet sit. Laoreet id donec ultrices tincidunt. Tortor consequat id porta nibh venenatis cras sed felis. Ac feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper. Imperdiet dui accumsan sit amet. Scelerisque fermentum dui faucibus in ornare quam. Proin sagittis nisl rhoncus mattis rhoncus. Dolor sit amet consectetur adipiscing elit pellentesque. Orci ac auctor augue mauris augue. Id aliquet risus feugiat in. Sed id semper risus in hendrerit gravida. Euismod elementum nisi quis eleifend quam adipiscing vitae. Lorem donec massa sapien faucibus et. Mi sit amet mauris commodo. Porta nibh venenatis cras sed. Nisl purus in mollis nunc sed id. Pulvinar sapien et ligula ullamcorper malesuada proin.< br />< br />Sollicitudin aliquam ultrices sagittis orci. At tempor commodo ullamcorper a lacus. Tincidunt dui ut ornare lectus sit amet est placerat in. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc. Molestie at elementum eu facilisis sed odio morbi quis commodo. Eu mi bibendum neque egestas congue quisque egestas diam in. Sed velit dignissim sodales ut eu sem. Risus ultricies tristique nulla aliquet enim tortor at. Vel orci porta non pulvinar neque laoreet suspendisse. Nunc faucibus a pellentesque sit amet porttitor eget dolor.
你能看出proin和Sollicitudin之间的两个
吗？
显然它按原样呈现文本。
是否有任何类型的字符可以替换文本中的 \n 以强制 html 将该位置的字符串拆分为一个新段落？谢谢
我终于通过使用 \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>;
我正在开发一个反应应用程序，我正在使用 firebase 来存储我的数据。我遇到换行问题。当我向 firebase 提交包含多个段落的博客 post 时，它会存储带有隐藏换行符的字符串。我说隐藏是因为你无法通过在 firebase 控制台中查看它们来看到它们，但我知道 firebase 确实存储了它们。问题是当文本读回应用程序时，我不确定如何将文本显示为多个段落。换行符仍然存在，但 html 不会将换行符呈现为段落分隔符。
这是一个例子：
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh tellus molestie nunc non blandit massa enim nec. Viverra nam libero justo laoreet sit. Laoreet id donec ultrices tincidunt. Tortor consequat id porta nibh venenatis cras sed felis. Ac feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper. Imperdiet dui accumsan sit amet. Scelerisque fermentum dui faucibus in ornare quam. Proin sagittis nisl rhoncus mattis rhoncus. Dolor sit amet consectetur adipiscing elit pellentesque. Orci ac auctor augue mauris augue. Id aliquet risus feugiat in. Sed id semper risus in hendrerit gravida. Euismod elementum nisi quis eleifend quam adipiscing vitae. Lorem donec massa sapien faucibus et. Mi sit amet mauris commodo. Porta nibh venenatis cras sed. Nisl purus in mollis nunc sed id. Pulvinar sapien et ligula ullamcorper malesuada proin. Sollicitudin aliquam ultrices sagittis orci. At tempor commodo ullamcorper a lacus. Tincidunt dui ut ornare lectus sit amet est placerat in. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc. Molestie at elementum eu facilisis sed odio morbi quis commodo. Eu mi bibendum neque egestas congue quisque egestas diam in. Sed velit dignissim sodales ut eu sem. Risus ultricies tristique nulla aliquet enim tortor at. Vel orci porta non pulvinar neque laoreet suspendisse. Nunc faucibus a pellentesque sit amet porttitor eget dolor.
这应该是两段。
我尝试对所有换行实例执行 find/replace 替换它们，如下所示：
const regex = new RegExp('\n', 'g');
p.body = p.body.replace(regex, '<br/>');
结果：
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh tellus molestie nunc non blandit massa enim nec. Viverra nam libero justo laoreet sit. Laoreet id donec ultrices tincidunt. Tortor consequat id porta nibh venenatis cras sed felis. Ac feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper. Imperdiet dui accumsan sit amet. Scelerisque fermentum dui faucibus in ornare quam. Proin sagittis nisl rhoncus mattis rhoncus. Dolor sit amet consectetur adipiscing elit pellentesque. Orci ac auctor augue mauris augue. Id aliquet risus feugiat in. Sed id semper risus in hendrerit gravida. Euismod elementum nisi quis eleifend quam adipiscing vitae. Lorem donec massa sapien faucibus et. Mi sit amet mauris commodo. Porta nibh venenatis cras sed. Nisl purus in mollis nunc sed id. Pulvinar sapien et ligula ullamcorper malesuada proin.< br />< br />Sollicitudin aliquam ultrices sagittis orci. At tempor commodo ullamcorper a lacus. Tincidunt dui ut ornare lectus sit amet est placerat in. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc. Molestie at elementum eu facilisis sed odio morbi quis commodo. Eu mi bibendum neque egestas congue quisque egestas diam in. Sed velit dignissim sodales ut eu sem. Risus ultricies tristique nulla aliquet enim tortor at. Vel orci porta non pulvinar neque laoreet suspendisse. Nunc faucibus a pellentesque sit amet porttitor eget dolor.
你能看出proin和Sollicitudin之间的两个
吗？
显然它按原样呈现文本。
是否有任何类型的字符可以替换文本中的 \n 以强制 html 将该位置的字符串拆分为一个新段落？谢谢
我终于通过使用 \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>;