用换行符JS替换字符串中的<br>标签

Question

我正在使用 react 并从持有 cmets 的 api 中提取。有多个带有br 标签的 cmets，因为 api 来自 php 用户。我正在尝试用实际换行符替换每个字符串中的br 标签。我也在使用 react，所以 jQuery 是不行的。

这就是我所拥有的：

this.state.notes.forEach((note) => {
  const fixed = note.body.replace(/<br>/g, "\r\n");
  rows.push(<ListGroupItem hover href="#" className="whiter" key= 
  {note.id}>
    <div className="d-flex justify-content-between">
      <h5 className="mb-1">{ note.name }</h5>
      <small>{ commentDate }</small>
    </div> 
    <p className="mb-1">{ fixed }</p>
  </ListGroupItem>)
}

我已经用空格替换了它并且它工作，但它没有与换行符一起工作。我哪里错了？

编辑 1：@T.J. Crowder 我添加了它在页面上的显示方式。 rows 是一个空数组，ListGroupItem 来自 MDBootstrap。

Answer 1

您替换<br> 的方式很好，除了您可能希望在关闭> 之前允许空格，以及在> 之前的可选/：

const fixed = note.body.replace(/<br\s*\\?>/g, "\r\n");

但这并不能解决您得到的是 HTML，而不是纯文本的问题。您最好让另一端向您发送文本而不是 HTML。通过向您发送 HTML，他们为您提供了大量 的工作要做。您不想只是将<br> 替换为换行符，因为HTML 中可以包含各种其他内容，例如命名字符实体（<、& 等。 )、数字字符实体（如&#003c;）、script 标签（打开 XSS 攻击的可能性）等。当您输出文本并转义 < 和 & 等时，React 很聪明重新输出为这些字符，而不是 HTML，因此如果您收到的 HTML 中包含 <，您实际上会在显示中看到 &、l、t 和 ;，这不是主意。如果您的起点是 HTML，那么在不允许脚本的情况下正确解释它是很困难的。 （React 确实有注入原始 HTML 的选项，但它有一个荒谬的名字出于某种原因。:-)）

一旦获得带有标准换行符（\r、\n 或 \r\n）的文本，您可以在其自己的 div 中呈现每一行以在输出中获得换行符，因为通常在HTML 换行符（或任何空格）只是一个空格：

<p className="mb-1">{
    fixed.split(/[\r\n]+/).map(line => <div>{line}</div>)
}</p>

例子：

const Example = ({fixed}) => {
    return <p className="mb-1">{
        fixed.split(/[\r\n]+/).map(line => <div>{line}</div>)
    }</p>;
};

const str =
  "This is a string with line breaks.\r\n" +
  "Line 2\r\n" +
  "Line 3";
ReactDOM.render(
  <Example fixed={str} />,
  document.getElementById("root")
);

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js"></script>