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

Question

我正在使用React，并从API中获取评论。由于该API来自PHP用户，因此多个评论中带有`br`标签。我试图将每个字符串中的`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。

- Nathan Geckle

---

我已经用空格替换了它，这样做可以工作，但是换行符无法正常工作。你修改后如何呈现字符串？ - T.J. Crowder

你可以尝试使用这个代码：text.split("<br>").join("\n") - Hemadri Dasari

基本上，如果你想要评论的文本而不是HTML格式的评论，你需要让另一端发送给你文本而不是HTML格式的文本。通过发送HTML格式，他们给了你很多工作要做。你不想仅仅用换行符替换<br>，因为显然你接收到的是HTML格式，所以可能有其他方面的HTML格式需要处理，例如命名字符实体（<，&等）或数字字符实体（如&#003c;）。你必须担心XSS和其他各种问题。 - T.J. Crowder

@HemadriDasari - OP已经拥有了将<br>替换为换行符的有效代码。指向不同的方法对他们没有帮助。 :-) - T.J. Crowder

我很确定它没有发送HTML，只是字符串。这些字符串包含br标签，最终会显示在字符串中。我只想从字符串中删除标签并使它们成为实际的换行符，因为它们只用空格分隔看起来不好看。 - Nathan Geckle

@NathanGeckle - 带有<br>等内容的字符串 = HTML。 - T.J. Crowder

Answer 1

你替换 <br> 的方式是正确的，除了在闭合的 > 前可能应该允许空格，以及在 > 之前可以加上可选的 /：

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

但这并没有解决你所获得的是HTML而不是纯文本的问题。最好让对方发送文本而不是HTML给你。通过发送HTML，他们给了你大量的工作要做。你不想仅仅用换行符代替<br>，因为HTML中可能还有各种其他内容，如命名字符实体(&lt;，&amp;等)、数字字符实体(例如&#003c;)、script标签(可能导致XSS攻击)等。当输出文本时，React会智能地转义<和&等字符，以便它们被输出为那些字符，而不是HTML。因此，如果你收到的HTML中有&lt;，你实际上会在显示中看到&、l、t和;，这并不理想。如果你的起点是HTML，正确解释它而又不允许脚本等是很困难的。(React确实有一个选项用于注入原始HTML，但它的名称非常尴尬，有特殊的原因。:-))

一旦你有了文本，并使用标准的换行符(\r, \n, 或 \r\n)，你可以将每一行分别渲染到自己的

中，以在输出中得到换行符，因为在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>

- T.J. Crowder

---

我明白这个方法的原理，但是当我使用.replace(/<br\s*\\?>/g, "\r\n")时，它不会在文本中显示"\r\n"。它显示的文本好像我用空格替换了它一样。编辑：不用管了，我忘记在分割后调用它，所以它仍然显示原始的修复变量。谢谢你的帮助！ - Nathan Geckle