如何替换字符串中的 \n 换行符，以便 <p> 标签可以显示换行符

Posted 2023-02-21

【中文标题】如何替换字符串中的 \\n 换行符，以便 <p> 标签可以显示换行符

【英文标题】：How to replace \n new line character in string so that <p> tag can show new line如何替换字符串中的 \n 换行符，以便 <p> 标签可以显示换行符

【发布时间】：2019-04-04 09:44:27

【问题描述】：

在我正在处理的一个反应应用程序中，有一个条件：

当字符串有换行符时

要显示字符串的<p>string</p>标签应替换为html换行符。

但这当然行不通。

我已经尝试过但对我不起作用的方法：

const string = Hello\nHii

<p>string.replace('\n', <br />)</p>

输出：

Hello<br />Hii

<p>string.replace('\n', &)</p>

输出：

Hello Hii

我在以下答案中找到了上述建议：

the val of a textarea doesnt take new lines into account

【问题讨论】：

Render HTML string as real HTML in a React component的可能重复

不确定这是否有帮助，但您是否尝试过围绕\n 拆分字符串，然后为结果拆分的每个元素生成一个新的<p>string</p>？

【参考方案1】：

有两种选择。

使用pre标签或css属性white-space: pre：

<p><pre>string</pre></p>

使用dangerouslySetInnerHTML：

<p dangerouslySetInnerHTML=__html: string.replace('\n', '<br />')></p>