解析作为字符串 HTML 一部分的 <br> 标签 [重复]答案

【问题标题】：Parse <br> tags that are a part of a string HTML [duplicate]解析作为字符串 HTML 一部分的 <br> 标签 [重复]
【发布时间】：2021-06-29 15:11:51
【问题描述】：

我有一个文本输入。我希望用户创建的换行符包含在输出文本中。

当用户点击预览时，输入值以字符串形式存储在状态中。我使用 .replace() 将换行符替换为 br，但标签在输出 html 中可见。

DesPreviewRender = () => {
    const desStateCopyOutput = this.state.inputValues.desValue.replace(/(?:\r\n|\r|\n)/g, ' <br> ');
    return (
        <FadeIn>
            <div className="desPreview--Temp">
                <p className="desPreviewValueText--Temp">
                    {desStateCopyOutput}
                </p>
            </div>
        </FadeIn>
    )
}

这是输出的截图：

Screenshot of html output

谢谢！

【问题讨论】：

你不是在找reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml, stackoverflow.com/a/56394170/3390200

标签： javascript html reactjs regex

【解决方案1】：

您可以执行以下操作（可能不是最好的方法，但它有效）：

  generateOutput = input => {
    const lines = input.split('\n')  
    const output = []
    lines.forEach((d, i) => {
      if (i > 0) {
        output.push(<br/>)
      }
      output.push(d)
    })
    return output
  }

【讨论】：

【解决方案2】：

正如 SuperDJ 所说，我可以使用 dangerouslySetInnerHTML 来做到这一点。谢谢！

【讨论】：